我有一组图像，所有图像的高度相同但宽度不同。我需要保持固定宽度，并且我需要图像无限循环地向左滑动。我还需要图像来填充容器宽度，以便显示部分图像。滚动将分步进行（例如 200 像素）并以设定的时间间隔进行。
我浏览了很多 jQuery 幻灯片插件，包括 Cycle、NivoSlider、EasySlider 和其他六个。但我所见过的似乎都没有让我确切地知道客户需要它做什么。我不需要可点击的导航或居中。只是一个连续的幻灯片，以设定的宽度步长和设定的间隔滚动。
我在想，就连续循环部分而言，我可以等到最左边的图像消失。最初，我尝试只使用append()，但是当最左边的移动到最后时，幻灯片会跳动。于是我就试着把它append()一个clone()到最后$('#slides').children()，然后remove()从头开始$('#slides')。
到目前为止，我有：
<div id="outer" style="width:300px;">
<div id="slides">
<img src="/images/slide1.jpg" alt="" style="height:150px;width:200px;" />
<img src="/images/slide2.jpg" alt="" style="height:200px;width:200px;" />
<img src="/images/slide3.jpg" alt="" style="height:150px;width:200px;" />
<img src="/images/slide4.jpg" alt="" style="height:300px;width:200px;" />
</div>
</div>
和
/* some code ideas taken from easySlider */
(function($){
$.fn.stepSlider = function() {
var slideInterval;
this.each(function() {
// this will be the width of $('#slides')
var width = 0;
// shortcut I saw in easySlider code; liked it, used it.
var o = $(this);
// set width of $('#slides') based on total width of child images
o.children().each(function(){width+=$(this).width();});
function scroll() {
o.children().each(
function(index){
// slide each of the children to the left by 150px
$(this).animate({'left':'-=150'}, 2000);
}
);
// after children have been animated() left, check to see
// if the left-most child has gone out of sight
if (o.children(':first-child').position().left + o.children(':first-child').width() < 0) {
// cloning the first child now
var el = o.children(':first-child').clone(true);
// removing the first child
o .children(':first-child').remove();
// trying to reset the css('left') of all of the children now that the first
// element is supposed to be gone
o.children().css('left', o.children(':first-child').position().left + o.children(':first-child').width());
// appending the clone()
o.append(el);
}
}
slideInterval = setInterval(function(){scroll();}, 2000);
});
}
})(jQuery);
滑动工作。但是将第一张图像移到最后会导致幻灯片跳动。然后事情就开始崩溃到完全停止的地步。
非常感谢任何见解。不，我对 jQuery 并不完全陌生，但是是的：这是我第一次尝试插件。
谢谢和最好的问候