Question

我正在创建一个图像滑块，一切都运行完美，但是当我点击.button它停止改变图片本身，我的意思是setTimeout停止它的工作。任何人都可以帮我找出原因吗？这是 HTML：

<div id="container">
                <ul>
                    <li><img src="http://www.rollymoe.com/images/circular-pergolas-11-circular-pergola-736-x-488.jpg"  /></li>
                    <li><img src="http://www.rollymoe.com/images/conex-houses-3-container-homes-for-sale-container-houses-shipping-container-houses-736-x-488.jpg"  /></li>
                    <li><img src="http://www.vattihome.com/wp-content/uploads/2015/09/modern-gazebo-khodiyar-associates-residential-interiors-modern-gazebo.jpg"  /></li>
                </ul>
              <div class="button prevButton">
                  <span class="arrow">&lt;</span>
              </div>
              <div class="button nextButton">
                  <span class="arrow">&gt;</span>
              </div>
            </div>

而且，这是 CSS：

#container{
width:78vw;
height:34vw;
position:relative;
overflow:hidden;
}

#container .prevButton{
height:104%;
width:10vw;
position:absolute;
cursor:pointer;
z-index:2000;
top:0;
background: #3978C2;
        background: -webkit-linear-gradient(left, black, rgba(0, 0, 0,      0));
        background: -o-linear-gradient(right, black, rgba(0, 0, 0, 0));
        background: -moz-linear-gradient(right, black, rgba(0, 0, 0, 0));
        background: linear-gradient(to right, black, rgba(0, 0, 0, 0));
}

#container .nextButton{
height:104%;
width:10vw;
position:absolute;
cursor:pointer;
z-index:2000;
right:0;
top:0;
background: #3978C2;
        background: -webkit-linear-gradient(right, black, rgba(0, 0, 0, 0));
        background: -o-linear-gradient(left, black, rgba(0, 0, 0, 0));
        background: -moz-linear-gradient(left, black, rgba(0, 0, 0, 0));
        background: linear-gradient(to left, black, rgba(0, 0, 0, 0));
}


.arrow {
font-size:7vw;
color:white;
position:absolute;
top:38%;
left:40%;
}

#container ul{
width:74.8vw;
height:104%;
list-style:none outside none;
position:absolute;
overflow:hidden;
}

#container li:first-child{
display:list-item;
position:absolute;
}

#container li{
position:absolute;
display:none;
left:0;
width:100%
}
#container li img {
width:100%
}

当然， SCRIPT：

$(window).load(function(){
    var pages = $('#container li'), current=0;
    var currentPage,nextPage;
    var timeoutID;
    var buttonClicked=0;
    var num=100+"%", onum=-100+"%";

    var handler1=function(){
        buttonClicked=1;
        $('#container .button').unbind('click');
        currentPage= pages.eq(current);
        if($(this).hasClass('prevButton'))
        {
            if (current <= 0)
                current=pages.length-1;
            else
                current=current-1;
            nextPage = pages.eq(current);   

            nextPage.css("marginLeft",onum);
            nextPage.show();
            nextPage.animate({ marginLeft: 0 }, 800,function(){
                currentPage.hide();
            });
            currentPage.animate({ marginLeft: num }, 800,function(){
                $('#container .button').bind('click',handler1);
            });
        }
        else
        {

            if (current >= pages.length-1)
                current=0;
            else
                current=current+1;
            nextPage = pages.eq(current);   

            nextPage.css("marginLeft",num);
            nextPage.show();
            nextPage.animate({ marginLeft: 0 }, 800,function(){
            });
            currentPage.animate({ marginLeft: onum }, 800,function(){
                currentPage.hide();
                $('#container .button').bind('click',handler1);
            });
        }       
    }

    var handler2=function(){
        if (buttonClicked==0)
        {
        $('#container .button').unbind('click');
        currentPage= pages.eq(current);
        if (current >= pages.length-1)
            current=0;
        else
            current=current+1;
        nextPage = pages.eq(current);   
        nextPage.css("marginLeft",num);
        nextPage.show();
        nextPage.animate({ marginLeft: 0 }, 800,function(){
        });
        currentPage.animate({ marginLeft: onum }, 800,function(){
            currentPage.hide();
            $('#container .button').bind('click',handler1);
        });
        timeoutID=setTimeout(function(){
            handler2(); 
        }, 4000);
        }
    }

    $('#container .button').click(function(){
        clearTimeout(timeoutID);
        handler1();
    });

    timeoutID=setTimeout(function(){
        handler2(); 
        }, 4000);

});

Answer 1

我相信您还需要在handler1方法中添加以下代码。

timeoutID=setTimeout(function(){
        handler2(); 
    }, 4000);

你可以在其他条件结束时添加。

单击后，setTimeout停止工作

1 个答案: