jquery 带有滑块的图片库被代码卡住了

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 不能在两个滑块之间共享，否则您在执行 next/previous 幻灯片时会遇到问题。解决这个问题的一种方法是添加一个数组，每个位置都属于一个滑块。

您声明了 eventId，但在某些行中调用了 eventID。小心区分大小写的东西。

你这里有一个我修复的例子：

https://jsfiddle.net/48ta1692/

同时检查 HTML。我添加了一些更改来为您提供一个 "nice" 滑块。

jquery 带有滑块的图片库被代码卡住了

jquery image gallery with slider stuck with code

jquery

image-gallery