Question

我正在尝试创建一个滑块。这里我们有3个div，有3种不同的背景颜色。在下面的代码中，3 div一个接一个地向下滑动，然后向上滑动并永远运行。住在这里：http://jsfiddle.net/kraditya/egs1br26/3/ 但我希望只有3个div一个接一个地永久地滑下来。这怎么可能？请帮忙。提前谢谢。

    <html>
    <head>
        <title>Slider</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="../jquery/jquery.min.js"></script>
        <style>
            .container{
                width: 500px;
                height: 250px;  
                margin: 0 auto; 
            }
            .slider1{
                width: 500px;
                height: 250px;  
                margin: 0 auto;
                //background-image: url(images/image-1.jpg);
                background-color:yellow;
                position: absolute;
                z-index: 1;
            }
            .slider2{
                width: 500px;
                height: 250px;  
                margin: 0 auto;                
                //background-image: url(images/image-2.jpg);
                background-color:green;
                position: absolute;
                z-index: 2;
            }
            .slider3{
                width: 500px;
                height: 250px;  
                margin: 0 auto;
                //background-image: url(images/image-3.jpg);
                background-color:blue;
                position: absolute;
                z-index: 3;
            }

        </style>
        <script type="text/javascript">

            $(document).ready(function () {

                var runForever = function () {
                    //$(".slider1").hide();
                    $(".slider2").hide(); //at start slider2 remains hidden;
                    $(".slider3").hide(); //at start slider3 remains hidden;


                    $(".slider2").slideDown(2000, function () {
                        $(".slider3").slideDown(2000, function () {
                            $(".slider3").slideUp(2000, function () {
                                $(".slider2").slideUp(2000, runForever);
                            });
                        });
                    });
                };
                runForever();
            });

        </script>
    </head>
    <body>
        <div class="container">
            <div class="slider1"></div>
            <div class="slider2"></div>
            <div class="slider3"></div>
        </div>

    </body>
</html>

Answer 1

http://jsfiddle.net/egs1br26/5/

$(document).ready(function () {

    var runForever = function () {
        $(".slider1").hide();

        $(".slider2").hide(); //at start slider2 remains hidden;
        $(".slider3").hide(); //at start slider3 remains hidden;


        $(".slider1").slideDown(2000, function () {
            $(".slider2").slideDown(2000, function () {
                $(".slider3").slideDown(2000,function(){
                  runForever();
                });

            });
        });
    };
   runForever();
});

您还可以像上一张幻灯片一样添加容器的背景。所以它看起来像是一个连续滑落。

.container {
    width: 500px;
    height: 250px;
    margin: 0 auto;
    background-color:blue;
}

使用z-index可以实现更现实的解决方案。通过这种方法，可以去除容器的背景颜色。

Updated Fiddle

var _img=$("#slideshow  div"), zIndex=99;
$(_img).eq(0).show();
function loopIt(){
    $(_img).eq(1).css('z-index',zIndex+1).slideDown(1000,function(){
            zIndex=zIndex+2;
            $(_img).eq(0).hide();        
                $(_img).eq(2).css('z-index',zIndex).slideDown(1000,function(){
                    zIndex=zIndex+3;
                    $(_img).eq(1).hide();            
                        $(_img).eq(0).css('z-index',zIndex).slideDown(1000,function(){
                            $(_img).eq(2).hide(); 
                            loopIt();        
                        });           

                });
    })
}
loopIt();

Answer 2

试试这个

示例：http://jsfiddle.net/kevalbhatt18/qu3m3k7f/

的

的
$(document).ready(function () { var runForever = function () { $(".slider1").hide(); $(".slider2").hide(); //at start slider2 remains hidden; $(".slider3").hide(); //at start slider3 remains hidden; $(".slider1").slideDown(2000, function () { $(".slider2").slideDown(2000, function () { $(".slider3").slideDown(2000,function(){ runForever(); }); }); }); }; runForever(); });

的

Jquery滑下滑块

2 个答案: