jQuery簡單滑塊下一個和上一個混音問題

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