我尝试在画廊的缩略图之间制作滚动功能。到目前为止,缩略图都在滚动,但这是一个小问题。如果滚动到达最后一个缩略图,它会继续朝右方向滚动(如果向右滚动),左侧部分也会发生同样的情况。
第二个问题是,如果只有一个li
的缩略图仍然滚动。
jQuery:
var min = left = $('.thumbs ul').offset().left;
var max = $('.thumbs li').length * 160 + min;
$('.right').click(function () {
var width = $('.thumbs').width();
if (left > width - max) {
left -= width;
if (left < width - max) left = width - max;
$('.thumbs ul').stop().animate({ 'left': left }, 1000);
}
});
$('.left').click(function () {
var width = $('.thumbs').width();
if (left < min) {
left += width;
if (left > min) left = min;
$('.thumbs ul').stop().animate({ 'left': left }, 1000);
}
});
HTML:
<a class="arrow left">←</a>
<div class="thumbs">
<ul>
<li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
<li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
<li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
<li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
<li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
<li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
<li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
<li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
</ul>
</div> <a class="arrow right">→</a>
这里是JSFiddle
解决方案:
滚动应从两侧(左侧和右侧)到达最后一个缩略图时停止。如果没有足够的缩略图滚动,那么它应该保持静止。
请帮助,谢谢:)
答案 0 :(得分:3)
计算运动的边界,并确保它不会向外滚动。当它滚动到负位置时,最小值为-(sum of images - width of thumbs)
,最大值为0
。
var left = 0;
function scroll(dx) {
var width = $('.thumbs').width() - 40;
var min = width - $('.thumbs li').length * 110;
var l = Math.min(0, Math.max(min, left + width * dx));
if (l != left) {
left = l;
$('.thumbs ul').stop().animate({ 'left': left }, 1000);
}
}
$('.right').click(function () {
scroll(-1.0);
});
$('.left').click(function () {
scroll(1.0);
});
演示:http://jsfiddle.net/Guffa/k9fxb1hp/3/
现在它以可见拇指的整个宽度滚动。如果您希望将1.0
滚动到80%的宽度,可以将0.8
更改为Frame
。
答案 1 :(得分:2)
您可以使用:last-child
选择器测量列表中最后li
的位置,并调整最大值,使其反映li
的宽度。
var min = $('.thumbs li').position().left;
var left = $('.thumbs ul:last-child').position().left;
var max = $('.thumbs li').length * 110 - min;
$('.right').click(function () {
var width = $('.thumbs').width();
if (left > (width - max)) {
left -= width;
if (left < width - max) left = width - max;
$('.thumbs ul').stop().animate({ 'left': left }, 1000);
}
});
$('.left').click(function () {
var width = $('.thumbs').width();
if (left < min) {
left += width;
if (left > min) left = min;
$('.thumbs ul').stop().animate({ 'left': left }, 1000);
}
});
请参阅JSFiddle。
答案 2 :(得分:1)
您是否考虑过无限循环滚动?
$('.arrow-next').click(function() {
$(".slider").animate({left: "-=25px"}, 600, function(){
var left = $(this).css('left');
$(this).css('left', left == "0px" ? "175px" : left);
});
});
$('.arrow-prev').click(function() {
$(".slider").animate({left: "+=25px"}, 600, function(){
var left = $(this).css('left');
$(this).css('left', left == "200px" ? "25px" : left);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 150px">
<button type="button" class="arrow-prev">></button>
<br>
<div style="display: inline-block; width: inherit; overflow: hidden;">
<div id="before" style="position: absolute; left: 0px; height: 25px; width: 50px; background-color:white; z-index: 5; vertical-align:middle;"></div>
<div style="position: absolute; left: 25px; height: 25px; width: 25px; background-color:red; vertical-align:middle;" class="slider"></div>
<div style="position: absolute; left: 50px; height: 25px; width: 25px; background-color:purple; vertical-align:middle;" class="slider"></div>
<div style="position: absolute; left: 75px; height: 25px; width: 25px; background-color:blue; vertical-align:middle;" class="slider"></div>
<div style="position: absolute; left: 100px; height: 25px; width: 25px; background-color:green; vertical-align:middle;" class="slider"></div>
<div style="position: absolute; left: 125px; height: 25px; width: 25px; background-color:greenyellow; vertical-align:middle;" class="slider"></div>
<div style="position: absolute; left: 150px; height: 25px; width: 25px; background-color:yellow; vertical-align:middle;" class="slider"></div>
<div style="position: absolute; left: 175px; height: 25px; width: 25px; background-color:orange; vertical-align:middle;" class="slider"></div>
<div id="after" style="position: absolute; left: 175px; height: 25px; width: 50px; background-color:white; z-index: 5; vertical-align:middle;"></div>
</div>
<br>
<br>
<br> <button type="button" class="arrow-next" style="display:inline-block">
<</button>
</div>