Question

基本上我已经创建了一个滑块，用户可以在其中看到图像重新显示三个Div。但是代码中的这个架构是，我制作了3个滑块，它们在特定时间后改变了它们的图像。唯一的问题是我无法为迭代设置正确的时间。就像我已经添加了淡入淡出效果，但经过一段时间的时间崩溃，你能告诉我正确的方法吗？

这是我的代码示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Image</title>
        <meta charset="UTF-8" />
        <meta name="description" content="Rotating Image Slider with jQuery & CSS3" />
        <meta name="keywords" content="jquery, rotation, slider, images, slideshow, autoplay, play, pause, css3"/>
        <meta name="author" content="Codrops" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />

        <style>
            .quotes{
                display:none;
                float:left;
            }

            .quotes1{
                display:none;
                float:left;
            }

            .quotes2{
                display:none;
                float:left;
            }
        </style>
    </head>
    <body>
        <div class="content">

            <img src = "images/3.jpg" class="quotes2">
            <img src = "images/1.jpg" class="quotes2">
            <img src = "images/2.jpg" class="quotes2">

        </div>

        <div class="content">

            <img src = "images/2.jpg" class="quotes1">
            <img src = "images/3.jpg" class="quotes1">
            <img src = "images/1.jpg" class="quotes1">

        </div>


        <div class="content">

            <img src = "images/1.jpg" class="quotes">
            <img src = "images/2.jpg" class="quotes">
            <img src = "images/3.jpg" class="quotes">
        </div>


        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>



        <script>
//js and 3 functions start here     

        (function() {

    var quotes = $(".quotes");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2700)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }

    showNextQuote();

})();


    (function() {

    var quotes = $(".quotes1");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2500)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }



    showNextQuote();

})();


(function() {

    var quotes = $(".quotes2");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2200)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }



    showNextQuote();

})();

        </script>

    </body>
</html>

2,3迭代后滑块效果丢失

0 个答案: