Question

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://jsfiddle.net/ee9R6/

我希望像

一样输出

http://www.lulupu.com/（右侧我们的制造商modlue垂直滑块）

Answer 1

我会采用稍微不同的路线

http://jsfiddle.net/ee9R6/4/

不是向上滑动所有元素，最终将向下排队，您可以向上滑动当前图像并同时向下滑动下一张图像。

function loop(ev) {
         $(imgs[z]).slideUp("slow");
         check = z != imgs.length - 1 ? z++ : z = 0;         
         $(imgs[z]).slideDown("slow");
         setTimeout(loop, 5000);         
     }

同时动画幻灯片和滑动

1 个答案: