jquery图像库，带滑块，代码卡住

尝试在一个页面上创建多个幻灯片图像库，但我坚持使用jquery代码，库无法按需要工作。有人能看看我的代码吗

这是我的HTML代码示例：

   <div class="slider" id="1">
       <div class="slider-show" id="slider-show-1">
          <div style="display: inline-block;">                                   
             <img src="some-image-link">
          </div>
          <div>
         <img src="some-image-link">                                     
          </div>
       </div> <!-- end of #slider-show -->

       <a href="javascript:void(0)" class="slider-prev" id="slider-prev-1"><</a>
       <a href="javascript:void(0)" class="slider-next" id="slider-next-1">></a>
    </div> <!-- end of #slider-1 -->

   <div class="slider" id="2">
       <div class="slider-show" id="slider-show-2">
          <div style="display: inline-block;">                                   
             <img src="some-image-link">
          </div>
          <div>
         <img src="some-image-link">                                     
          </div>
       </div> <!-- end of #slider-show -->

       <a href="javascript:void(0)" class="slider-prev" id="slider-prev-2"><</a>
       <a href="javascript:void(0)" class="slider-next" id="slider-next-2">></a>
    </div> <!-- end of #slider-2 -->

这是我的Jquery代码：

    $(document).ready(function() {
   var currentIndex = 0;
   var eventId = 0;
   items = $('#slider-show-1 div');
   itemAmt = items.length;

       $('.slider').mouseover(function() {
    eventId = $(this).attr('id');
    $('#slider-prev-'+eventId).show();
    $('#slider-next-'+eventId).show();
   });

   $('.slider').mouseout(function(){
    eventId = $(this).attr('id');
    $('#slider-prev-'+eventId).hide();
    $('#slider-next-'+eventId).hide();
   });

       $('.slider-next').click(function(e) {
    e.preventDefault();
    currentIndex += 1;
    if (currentIndex > itemAmt - 1) {
        currentIndex = 0;
    }

    var item = $('#slider-show-'+eventID div').eq(currentIndex);
    items.hide();
    item.css('display','inline-block');
   });

   $('.slider-prev').click(function(e) {
    e.preventDefault();
    currentIndex -= 1;
    if (currentIndex < 0) {
        currentIndex = itemAmt - 1;
    }

            var item = $('#slider-show-'+eventID div').eq(currentIndex);
    items.hide();
    item.css('display','inline-block');
   });

$（文档）.ready（函数（）{
var currentIndex=0；
var-eventId=0；
items=$（“#slider-show-1 div”）；
itemAmt=items.length；
$（'.slider'）.mouseover（函数（）{
eventId=$（this.attr（'id'）；
$（'#滑块上一个-'+eventId）.show（）；
$（“#滑块下一步-”+eventId）.show（）；
});
$（'.slider'）.mouseout（函数（）{
eventId=$（this.attr（'id'）；
$（'#slider prev-'+eventId）.hide（）；
$（“#滑块下一步-”+eventId）.hide（）；
});
$（'.slider next'）。单击（函数（e）{
e、 预防默认值（）；
currentIndex+=1；
如果（currentIndex>itemAmt-1）{
currentIndex=0；
}
var item=$（“#滑块显示-”+eventID div'）.eq（currentIndex）；
items.hide（）；
css（'display'，'inline-block'）；
});
$（'.slider prev'）。单击（函数（e）{
e、 预防默认值（）；
currentIndex-=1；
如果（当前索引<0）{
currentIndex=itemAmt-1；
}
var item=$（“#滑块显示-”+eventID div'）.eq（currentIndex）；
items.hide（）；
css（'display'，'inline-block'）；
});

---

我对jquery没有太多的经验，所以有人能纠正我的jquery代码吗？因为我知道它写错了，只是我不知道如何做对。

您的代码中有很多问题。 正如martincarlin87所说，您需要编辑

var item = $('#slider-show-'+eventID div') 

到

当前索引不能在两个滑块之间共享，否则在执行下一张/上一张幻灯片时会遇到问题。解决此问题的一种方法是添加一个数组，并且每个位置都属于一个滑块

声明eventId，但在某些行中调用eventId。注意区分大小写的事情

我给你举了一个例子：

---

还可以查看HTML。我添加了一些更改，为您提供了一个“漂亮”的滑块。

实际问题是什么？突出的一点是

var item=$（“#slider show-”+eventID div'）

行，修复连接，使其成为有效的选择器：

var item=$（“#slider show-”+eventID+“div”）

寻求调试帮助的问题应包括所需的行为、特定的问题或错误以及复制该问题所需的最短代码。没有明确问题说明的问题对其他读者没有帮助。请参阅：。谢谢@martincarlin87现在它工作正常，它解决了我关于显示图像的问题。没有问题吗I don’我看不出这个错误，我现在花了几个小时研究这段代码：）谢谢！谢谢你，currentIndex的解决方案非常好。我曾尝试写过类似的东西，但你的解决方案要好得多。非常感谢，你至少为我节省了几个小时。

var item = $('#slider-show-'+ eventID + ' div')