停止观看最后一个项目时滚动 - 与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>