可能的重复:
我的轮播不起作用
我有点困惑!
我正在创建这个旋转木马,我希望它循环播放。
其他一切都很好,但是,当最后一个图像滑动时
我希望第一个在它之后做同样的事情,然后第二个......无限。
我尝试过很多事情,例如将第一张图像附加到最后一张图像。
我也尝试过显示最后一张之后的图像(这个尝试但给出了不良效果)。
我需要被告知我需要做出哪些调整。非常感谢!
var images = $("#slideShow div");
var index = 0;
for (i = 0; i < images.length; i++) {
$(images[i]).addClass("image-" + i);
}
setInterval(function() {
$(".image-" + (index)).slideUp(1000);
if (index < images.length - 1) {
index += 1;
}
else {
index = 0;
}
}, 500);
#slideShow {
height:20em;
width:80%;
float:right;
}
#slideShow div{
line-height:20em;
float:right;
}
#slideShow img{
vertical-align:middle;
border:solid 5px #A5A5A5;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
<div id="slideShow">
<?php
$dir = "carousel";
$dh = opendir($dir);
while($slide = readdir($dh)){
$items[] = $slide;
}
for($i=0; $i<sizeof($items); $i++){
if($items[$i] != "." && $items[$i] != ".."){
$imagePath = $dir."/".$items[$i];
$image = "<div>"."<img src = \"".$imagePath."\""." />"."</div>";
echo $image;
}
}
closedir($dh);
?>
</div>
不要切换图像,这会使代码不可读并且充满 z-index 更改,just animate
the scrollTop
容器元素的
- 对scrollTop 进行动画处理并在回调中重做循环函数并:
- 将scrollTop重置为0并且
- 删除第一个元素,追加它
after
最后一张
var $slideShow = $('#slideshow');
function loop() {
$slideShow.stop().animate({
scrollTop: 200
}, 800, 'linear', function() {
$(this).scrollTop(0).find('div:last').after($('div:first', this));
loop(); // Recursion
});
}
loop(); // Start
#slideshow {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
}
#slideshow img {
display: block;
}
<div id="slideshow">
<div><img src="http://placehold.it/200x200/cf5&text=1" alt=""></div>
<div><img src="http://placehold.it/200x200/f0f&text=2" alt=""></div>
<div><img src="http://placehold.it/200x200/444&text=3" alt=""></div>
<div><img src="http://placehold.it/200x200/f70&text=4" alt=""></div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)