javascript - jQuery 简单 slider 下一个和上一个的问题

Question

我试图找出为什么我的 slider 表现得很奇怪，如果你一直叮当响直到到达 slider 末端，它就会按预期工作，但如果你尝试返回到中间，它会随机播放一些图片。

这是网站temp link用于演示

我需要隐藏 3 <li>在每次单击下一步按钮时，并在单击后退按钮时显示它们。

这是我迄今为止开发的代码。

HTML

<li id="gallery_beachwear">
<div class="imageSlider">
  <ul class="arrow_nav">
    <li><a href="#next" title="Next" class="arrow-active go-next"> &gt; </a></li>
    <li><a href="#prev" title="Prev" class="arrow-disables go-prev"> &lt; </a></li>
    <li><a href="#!/" title="Close" class="closeBtn"> X </a></li>
  </ul>

  <ul class="imgList">
    <li>
        <a href="images/gallery/clothing/a.jpg" rel="Appendix"><span class="zoomImg" style="opacity: 0;"></span>
          <img alt="" src="images/gallery/clothing/a.jpg">
        </a>
    </li>
            <li>
        <a href="images/gallery/clothing/b.jpg" rel="Appendix"><span class="zoomImg" style="opacity: 0;"></span>
          <img alt="" src="images/gallery/clothing/b.jpg">
        </a>
    </li>
  </ul>
</div> <!-- End of slider -->
</li>

我创建了一个可以重复使用的函数，因为我有 2 个 slider

JS

function imageGallery(ID) {
    var imgList = $(ID),
    items = imgList.find(".imgList li"),
    arrows = imgList.find("ul.arrow_nav"),
    currenItem = 0,
    itemCount = items.length,
    steps = 3;

    arrows.find('a.go-next').bind('click', (function(e){
        e.preventDefault();

        var i = currenItem;
            if(i !== 0) {
                i++;
            }

            if( (itemCount - currenItem ) > 4 ) {
                $(items[i]).hide(200);
                i++;
                $(items[i]).hide(200);
                i++;
                $(items[i]).hide(200);
                currenItem = i; 
            }
            console.log(i);
    }));

    arrows.find('a.go-prev').bind('click', (function(e){
        e.preventDefault();

        var i = currenItem;
            if(i !== 0) {
                i--;
            }

            if( (itemCount - currenItem ) > 0 ) {
                //Hide next
                $(items[i]).show(200);
                i--;
                $(items[i]).show(200);
                i--;
                $(items[i]).show(200);
                currenItem = i; 
            }

            console.log(i);
    }));
}

//Calling function
imageGallery("#gallery_beachwear");

Answer 1

你的逻辑是错误的，你应该改一下

arrows.find('a.go-next').bind('click', (function(e){
    e.preventDefault();
    var i = currenItem;
    if( (itemCount - currenItem ) > 3 ) {
        $(items[i]).hide(200);
        i++;
        $(items[i]).hide(200);
        i++;
        $(items[i]).hide(200);
        i++;
        currenItem = i; 
    }
}));
arrows.find('a.go-prev').bind('click', (function(e){
    e.preventDefault();
    var i = currenItem;
    if( (currenItem ) > 0 ) {
        //Hide next
        i--;
        $(items[i]).show(200);
        i--;
        $(items[i]).show(200);
        i--;
        $(items[i]).show(200);
        currenItem = i; 
    }
    console.log(i);
}));