[英]Animation slideUp and slidedown simultaneously
的HTML
<div id="slider">
<a href="#"><img src="http://www.alleywatch.com/wp-content/uploads/2013/04/brand.jpeg" id="image1" /></a>
<a href="#"><img src="http://www.ereleases.com/prfuel/wp-content/uploads/2012/07/brand_stamp.jpg" id="image2" /></a>
<a href="#"><img src="http://www.submitedge.com/blog/wp-content/uploads/2013/04/Creating-a-Positive-Brand-Image.jpg" id="image3" /></a>
</div>
<div id="slider-back"></div>
的CSS
#slider {
height:296px;
overflow:hidden;
width:822px;
position:absolute;
left:50%;
margin-left:-411px;
top:87px;
z-index:20;
}
#slider-back {
position:absolute;
left:50%;
margin-left:-411px;
height:296px;
z-index:29;
top:87px;
width:822px;
background: url("/test/backimage.png") no-repeat scroll 0px 0px transparent;
jQuery的
$(document).ready(function () {
var imgs = $('#slider > a > img');
var z = 1;
var previousImageId = "";
$(imgs[0]).show();
function loop(ev) {
imgs.delay(5000).slideUp('slow').eq(z).slideDown(500, function () {
check = z != imgs.length - 1 ? z++ : z = 0;
loop();
});
}
loop();
});
我在小提琴中试过
我想输出像
http://www.lulupu.com/ (我们制造商的右侧是modlue垂直滑块)
我会走一条稍微不同的路线
不必向上滑动所有元素(最终使向下滑动队列),您可以向上滑动当前img并同时向下滑动下一张图像。
function loop(ev) {
$(imgs[z]).slideUp("slow");
check = z != imgs.length - 1 ? z++ : z = 0;
$(imgs[z]).slideDown("slow");
setTimeout(loop, 5000);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.