Question

试图在一页上创建带有幻灯片的多个图像库，但是我一直停留在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');
   });

我对jquery不太熟悉，所以有人可以更正我的jquery代码，因为我知道它写错了，只是我想不出正确的方法。

Answer 1

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

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

到

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

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

您声明eventId，但是在某些行中调用eventID。请注意区分大小写的内容。

您在这里有一个我固定的示例：

https://jsfiddle.net/48ta1692/

还要检查HTML。我添加了一些更改，以便为您提供一个“不错”的滑块。

jQuery图像库，滑块卡在代码中

1 个答案: