Question

我试图弄清楚为什么我的滑块表现得很奇怪，如果你只是一直叮当作响直到它滑到滑块的末端，它就可以正常工作，但如果你试图回到中间它会改变一些照片。

以下是演示

我需要在每次下一步按钮上隐藏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个滑块

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);
}));

jQuery简单滑块next＆amp;上一个问题

1 个答案: