我有一组图像，所有图像的高度相同但宽度不同。我需要保持固定的宽度，我需要图像在无限循环中向左滑动。我还需要图像来填充容器宽度，以便显示部分图像。滚动将按步骤（例如200px）和设定的间隔进行。
我浏览了大量的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);
和
{{1}}
滑动工作。但是第一张图像移动到最后会导致幻灯片跳跃。然后事情开始分解到完全停止的程度。
非常感谢任何见解。不，我不是jQuery的新手，但是是的：这是我的第一个插件尝试。
谢谢和最好的问候
答案 0 :(得分：1)
我建议你可以使用scrollTo插件（或自己编写）。以下内容将以300像素滚动一个区域，因此您放入的内容无关紧要。您必须管理区域的位置和宽度，以便在最后停止或根据需要进行操作。
ScrolTo：http://demos.flesler.com/jquery/scrollTo/
JSFiddle：http://jsfiddle.net/YZ9vA/2/
$(document).ready(function(){
var areaWidth = 0, x=0;
$('#slideshow img').each(function() {
areaWidth = areaWidth + $(this).width();
});
$('#slideshow').width(areaWidth);
function ScrollMe() {
x += 300;
$('#sliders').scrollTo({top:0, left:x},800);
}
setInterval(ScrollMe,1000);
});
原始答案：
我给你的建议是使用jquery循环，它将永远重复。而不是循环图像，循环div，你可以将这些宽度设置为200px，你内部的图像可以放置你需要（居中，宽度100％等）。
http://jquery.malsup.com/cycle/
#slides, #slides div {width:200px;height:300px}
#slides img {width:100%;height:100%}
<div id="slides">
<div><img src="/images/slide1.jpg" alt="" style="" /></div>
<div><img src="/images/slide2.jpg" alt="" style="" /></div>
<div><img src="/images/slide3.jpg" alt="" style="" /></div>
<div><img src="/images/slide4.jpg" alt="" style="height:300px;width:200px;" /></div>
<!-- I left the last inline style on, you can use that to override or use css externally -->
</div>
$('#slides').cycle({fx:'scrollHorz',
continuous: 1,
easeIn: 'linear',
easeOut: 'linear'});
答案 1 :(得分：0)
所以感谢lucuma的帮助，我有一些工作。
<强> CSS：
<style type="text/css">
#outer {height: 250px; width: 760px; overflow:hidden;}
#mid {height: 250px; width: 760px; overflow:hidden;}
#slides {height: 250px; width: auto; overflow:hidden;}
#slides img {float: left; height: 250px;} /* height specified just for clarity */
</style>
<强> HTML：
我必须将#slides div包装在另外两个div而不是一个div中。只有一个包装器，scrollTo插件最终将div设置为100％宽度，而不是遵守我的760px约束。由于时间限制，我没有进一步调查。我刚刚添加了额外的div并且称它为一天。
<div id="outer">
<div id="mid">
<div id="slides">
<img src="images/image1.jpg" alt="" style="width:760px;" />
<img src="images/image2.jpg" alt="" style="width:529px;" />
<img src="images/image3.jpg" alt="" style="width:720px;" />
<img src="images/iamge4.jpg" alt="" style="width:563px;" />
<!-- my live version has 16 total images -->
</div>
</div>
</div>
<强> JavaScript的：
<script type="text/javascript" src="scripts/jquery.scrollTo.min.js"></script>
<script type="text/javascript">
$(function(){
var areaWidth = 0, x = 0, lelements=$('#slides img').length * -1;
/* This is the same essential functionality that I had in my original post
* to set the width of the images container
*/
function setWidth() {
$('#slides img').each(function() {
areaWidth = areaWidth + $(this).width();
});
$('#slides').width(areaWidth);
}
/* This is also essentially what I was doing before: checking
* to see if an image is no longer viewable. It appends a clone
* to the $('#slides'), but it differs from my original idea by
* not trying to remove any :first element.
* So $('#slides img').length will continue to increase as the
* program runs. I was trying to avoid this, but in reality, it
* probably doesn't matter a ton unless someone is watching the
* same page for quite a long time.
*/
function checkIt() {
$('#slides img').slice(lelements).each(function() {
if ($(this).position().left + $(this).width() < 0) {
$(this).clone().appendTo($('#slides'));
}
});
}
/* This is where we use Flesler's scrollTo plugin to handle the motion.
* I changed scrollTo({}, 3000) to scrollTo({}, {duration: 1000})
* to slow the transition speed.
*/
function scrollMe() {
$('#outer').scrollTo({top:0, left:x}, {duration:1000});
/* x += 300 was the first line in scrollMe(), but ended up
* resulting in a 600px slide for the first transition,
* so I moved it here. The first transition takes longer
* to occur, but all other transitions are fine
*/
x += 300;
checkIt();
setWidth();
}
setInterval(scrollMe, 3000);
});
</script>
我要做的另一件事是确保我的第一张幻灯片是全宽（760px）。如果它小于那个，那么第二个图像最初将是不可见的，然后它会突然出现在容器的左侧空间中，然后会发生滚动。所有后续图像都很好。显然，让第一个图像填满整个宽度可以消除这种伪影。
再次感谢lucuma - 你是一帮帮助！