0

http://jsfiddle.net/KmXEg/

我有三个可见的按钮：

  • 停止（首先可见，但单击开始按钮后变为不可见）-停止自动过渡并使其手动
  • 开始（点击停止按钮后可见） - 开始自动过渡
  • 上一个和下一个按钮

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

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

我该如何解决这个问题？

谢谢

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>
4

2 回答 2

0

即使滑块停止，您也在 slideImage 函数中设置新的超时。在你调用的那一刻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();
});
于 2013-08-27T12:47:45.447 回答
0

解决了：

$(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();    
                });
            });
于 2013-08-27T14:08:04.817 回答