停止觀看最後一個項目時滾動 - 與jQuery

Question

我有擁有像幻燈片滾動動態的項目清單，並顯示在列表的最後一個項目的時候，我不能設置限制帶箭頭的滾動。

任何想法，我怎麼能停止觀看的最後一個項目時滾動？這裏的例子：JSFIDDLE

$('.nextArrow').click(function() { 
     //Animate the images to next slide 
     $('.thumbs li:eq(0)').animate({"margin-top": "-=80"}, 500);    
    }); 

    $('.prevArrow').click(function() { 
     var marginTopValue = $('.thumbs li:eq(0)').css('margin-top'); 
     //Animate the image to previous slide 
     if (marginTopValue == '0px') { 

     } else { 
      $('.thumbs li:eq(0)').animate({"margin-top": "+=80"}, 500); 
     }; 
    }); 

Answer 1

變化

$('.nextArrow').click(function() { 
    //Animate the images to next slide 
    $('.thumbs li:eq(0)').animate({"margin-top": "-=80"}, 500);    
}); 

到

$('.nextArrow').click(function() { 
     //Animate the images to next slide 
    var marginTopValue = parseInt($('.thumbs li:eq(0)').css('margin-top').replace('px', '')); 
    if (marginTopValue >= (0-$('.thumbs')[0].scrollHeight)) 
    { 
     $('.thumbs li:eq(0)').animate({"margin-top": "-=80"}, 500); 
    } 
    }); 

JSFIDDLE這裏！

Answer 2

在的jsfiddle嘗試使用這段JavaScript代碼

 $('.thumbs').before('<span class="nextArrow arrowThumbs" id="nextArrow">Next</span>').after('<span class="prevArrow arrowThumbs" id="prevArrow">Prev</span>'); 
    $('.nextArrow').click(function() { 
     //Animate the images to next slide 
    console.log($('.thumbs').height(), $('.thumbs li:eq(0)').css('margin-top').replace("px", "")); 
    if(Math.abs($('.thumbs li:eq(0)').css('margin-top').replace('px','')) <= $('.thumbs').height() + 60) 
     $('.thumbs li:eq(0)').animate({"margin-top": "-=80"}, 500);    
    }); 

    $('.prevArrow').click(function() { 
     var marginTopValue = $('.thumbs li:eq(0)').css('margin-top'); 
     //Animate the image to previous slide 
     if (marginTopValue == '0px') { 

     } else { 
      $('.thumbs li:eq(0)').animate({"margin-top": "+=80"}, 500); 
     }; 
    }); 

這是超級幼稚的，因爲它只是控制與您滾動保證金，但用簡單的元素的高度調整可以工作

Answer 3

這是不是我會做一個上/下一個滑塊，但作爲一個解決問題的方法（不完全替代它），你應該測量UL的高度，防止頂部利潤率超過其偏移。

EG：https://jsfiddle.net/ssx7pL3v/6/

$('.thumbs').before('<span class="nextArrow arrowThumbs" id="nextArrow">Next</span>').after('<span class="prevArrow arrowThumbs" id="prevArrow">Prev</span>'); 
 

 
var ih = $('.thumbs li:first').height(); 
 

 
$('.nextArrow').click(function() { 
 
    var maxTopMargin = 0 - ($('.thumbs').height() + ih); 
 
    var marginTopValue = parseInt($('.thumbs li:eq(0)').css('margin-top')); 
 
    //Animate the image to next slide 
 
    if (marginTopValue > maxTopMargin) { 
 
    $('.thumbs li:eq(0)').animate({ 
 
     "margin-top": "-=" + ih 
 
    }, 500); 
 
    } 
 
}); 
 

 
$('.prevArrow').click(function() { 
 
    var marginTopValue = parseInt($('.thumbs li:eq(0)').css('margin-top')); 
 
    //Animate the image to previous slide 
 
    if (marginTopValue < 0) { 
 
    $('.thumbs li:eq(0)').animate({ 
 
     "margin-top": "+=" + ih 
 
    }, 500); 
 
    }; 
 
});

.thumbs { 
 
    display: block; 
 
    width: 128px; 
 
    height: 120px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
} 
 
.thumbs li { 
 
    width: 128px; 
 
    display: block; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    list-style: none; 
 
} 
 
.thumbs li h2 { 
 
    font-size: 11px; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.thumbs li img { 
 
    width: 30%; 
 
} 
 
.arrowThumbs { 
 
    display: block; 
 
    border: 1px solid #000; 
 
    padding: 10px; 
 
    width: 128px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="thumbs"> 
 
    <li> 
 
    <h2>Item 1</h2> 
 
    <img src="http://icons.iconarchive.com/icons/rafiqul-hassan/blogger/128/Refresh-icon.png" alt=""> 
 
    </li> 
 
    <li> 
 
    <h2>Item 2</h2> 
 
    <img src="http://icons.iconarchive.com/icons/rafiqul-hassan/blogger/128/Refresh-icon.png" alt=""> 
 
    </li> 
 
    <li> 
 
    <h2>Item 3</h2> 
 
    <img src="http://icons.iconarchive.com/icons/rafiqul-hassan/blogger/128/Refresh-icon.png" alt=""> 
 
    </li> 
 
    <li> 
 
    <h2>Item 4</h2> 
 
    <img src="http://icons.iconarchive.com/icons/rafiqul-hassan/blogger/128/Refresh-icon.png" alt=""> 
 
    </li> 
 
    <li> 
 
    <h2>Item 5</h2> 
 
    <img src="http://icons.iconarchive.com/icons/rafiqul-hassan/blogger/128/Refresh-icon.png" alt=""> 
 
    </li> 
 
    <li> 
 
    <h2>Item 6</h2> 
 
    <img src="http://icons.iconarchive.com/icons/rafiqul-hassan/blogger/128/Refresh-icon.png" alt=""> 
 
    </li> 
 
</ul>