javascript - 在手动模式下单击下一个或上一个按钮后，图像转换自动开始

Question

http://jsfiddle.net/KmXEg/

我有三个可见的按钮:

• 停止(首先可见，但点击后变得不可见开始按钮)- 停止自动转换并使其手动
• 开始(点击停止按钮后可见)- 自动开始过渡
• 上一个和下一个按钮

单击停止时，过渡停止，这很好，但是在单击上一个或下一个按钮浏览图像后，过渡本身再次开始，这是错误的。它还会自行启动，出现开始按钮而不是停止。

它应该如何工作，当我停止它时，我应该能够使用上一个和下一个按钮导航自己。

我该如何解决这个问题？

谢谢

JS

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function()
            {
                var timeoutId;                                                              //To store timeout id

                var slideImage = function(step)
                {
                    if (step == undefined) step = 1;                                        //If undefined then set default value

                    clearTimeout(timeoutId);                                                //Clear timeout if any

                    var indx = $('.slide:visible').index('.slide');                         //Get current image's index

                    if (step != 0)                                                          //If step == 0, we don't need to do any fadein our fadeout
                    {
                        $('.slide:visible').fadeOut();                                      //Fadeout this slide
                    }

                    indx = indx + step;                                                     //Increment for next slide

                    if (indx >= $('.slide').length)                                         //Check bounds for next slide
                    {
                        indx = 0;
                    }
                    else if (indx < 0)
                    {
                        indx = $('.slide').length - 1;
                    }

                    if (step != 0)                                                          //If step == 0, we don't need to do any fadein our fadeout
                    {
                        $('.slide:eq(' + indx + ')').fadeIn();                              //Fadein next slide
                    }

                    timeoutId = setTimeout(slideImage, 5000);                               //Set Itmeout
                };

                slideImage(0);                                                              //Start sliding

                $('#prev').click(function()                                                 //When clicked on prev
                {
                    slideImage(-1);                                                         //SlideImage with step = -1
                });

                $('#next').click(function()                                                 //When clicked on next
                {
                    slideImage(1);                                                          //SlideImage with step = 1
                });

                $('#stop').click(function()                                                 //When clicked on Pause
                {
                    clearTimeout(timeoutId);                                                //Clear timeout

                    $(this).hide();                                                         //Hide Pause and show Play
                    $('#play').show();
                });

                $('#play').click(function()                                                 //When clicked on Play
                {
                    slideImage(0);                                                          //Start slide image

                    $(this).hide();                                                         //Hide Play and show Pause
                    $('#stop').show();    
                });
            });

CSS

* {
                margin:0px;
                padding:0px;
                font-family:arial;
                font-size:12px;
            }
            #cover {
                margin-top:50px;
                width:100%;
                height:300px;
                background:#EEEEEE;
            }
            #slides {
                width:100%;
                height:300px;
                position:absolute;
            }
            .slide {
                position:absolute;
                width:100%;
                height:300px;
                display:none;
            }
            .slide img {
                width:100%;
                height:300px;
            }
            .first {
                display:block;
            }
            #controls {
                position:relative;
                top:240px;
                text-align:right;
            }
            #controls img {
                width:48px;
                height:48px;
                cursor:hand;
                cursor:pointer;
            }
            #play {
                display:none;
            }

HTML

<div id="cover">
            <div id="slides">
                <div class="slide first"><img src="images/1.gif" /></div>
                <div class="slide"><img src="images/2.gif" /></div>
                <div class="slide"><img src="images/3.gif" /></div>
                <div class="slide"><img src="images/4.gif" /></div>
            </div>
            <div id="controls">
                <img id="prev" src="images/prev.png" />
                <img id="play" src="images/play.png" />
                <img id="stop" src="images/stop.png" />
                <img id="next" src="images/next.png" />
            </div>
        </div>

Answer 1

您在 slideImage 函数中设置了一个新的超时时间，即使 slider 已停止也是如此。在您调用 slideImage 的那一刻，在函数末尾设置超时以再次调用 slideImage(从而恢复自动播放)。

删除那里的代码，将其放入播放函数中，播放函数的代码并使用 setInterval。

像这样:

$('#stop').click(function () {
    clearInterval(timeoutId);
    $(this).hide();
    $('#play').show();
});
$('#play').click(function () {
    slideImage(0);
    timeoutId = setInterval(slideImage, 1000);
    $(this).hide();
    $('#stop').show();
});