Question

我有三个按钮可见：

停止（在第一个位置可见但在点击后变得不可见开始按钮） - 停止自动转换并使其手动
start（单击停止按钮后变为可见） - 自动启动过渡
上一个和下一个按钮

单击停止时，转换停止，但是在单击上一个或下一个按钮以浏览图像后，转换将自动重新启动，这是错误的。它也会自动启动，出现启动按钮而不是停止。

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

我该如何解决这个问题？

由于

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函数中设置新的超时。在您调用slideImage时，在函数结束时设置超时以再次调用slideImage（从而恢复自动播放）。

删除那里的代码，把它放到play函数中代码到play函数并使用setInterval。

这样的事情：

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

Answer 2

解决：

$(document).ready(function()
            {
                var timeoutId;                                                              //To store timeout id

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

                    clearTimeout(timeoutId);                                                //Clear timeout if any

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

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

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

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

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

                    if (request != 'manual')
                    {
                        timeoutId = setTimeout(slideImage, 1000);                               //Set Itmeout
                    }
                };

                slideImage(0, 'auto');                                                              //Start sliding

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

                    $('#stop').hide();
                    $('#play').show();
                });

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

                    $('#stop').hide();
                    $('#play').show();
                });

                $('#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, 'auto');                                                          //Start slide image

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

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

2 个答案: