Question

我创建了自己的滑块，现在我在使用项目符号导航后再次调用自动滑动设置间隔功能时遇到问题。 “setTimeout（autoSlide，1000）;”不管用。我试过的代码如下。请给我一个解决方案。谢谢。

<!doctype html>
<head>
    <title> Custom Slider </title>
    <style type="text/css">
        body
        {
            margin: 0;
            padding: 0;
        }
        .slide
        {
            float: left;
            width: 960px;
            height: 300px;
            background-color: #000;
        }
        .slide h1
        {
            color: #fff;
        }
        #container
        {
            width: 960px;
            overflow: hidden;
            margin: auto;
            margin-top: 100px;
        }
        #wrapper
        {
            position: relative;
            right: 0px;
        }
        #bullets li
        {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="wrapper">
            <div class="slide">
                <h1>Slide 1</h1>
            </div>
            <div class="slide">
                <h1>Slide 2</h1>
            </div>
            <div class="slide">
                <h1>Slide 3</h1>
            </div>
            <div class="slide">
                <h1>Slide 4</h1>
            </div>
            <div style="clear: both;"> </div>
        </div>
    </div>
    <ol id="bullets">
    </ol>
    <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var slideWidth = $('.slide').width();
            var slideLength = $('.slide').length;
            var totalWidth = slideWidth * slideLength;
            $('#wrapper').css('width', totalWidth);
            var currentPos = $('#wrapper').position().right;
            var currentIndex = 0;
            var autoSlide;
            function auto(){
                currentIndex += 1;
                if(currentIndex > slideLength - 1)
                {
                    currentIndex = 0;
                }
                $('#wrapper').animate({right: currentIndex * slideWidth});
            }

            var autoSlide = setInterval(auto, 1000);
            $('.slide').each(function(){
                $('#bullets').append('<li class="bullet"> </li>');
            });

            $('.bullet').click(function(){
                clearInterval(autoSlide);
                var bulletIndex = $(this).index();
                if(bulletIndex > slideLength - 1)
                {
                    bulletIndex = 0;
                }           
                $('#wrapper').animate({right: bulletIndex * slideWidth});       
                currentIndex = bulletIndex;
                setTimeout(autoSlide, 1000);
            });
        });
    </script>
</body>

Answer 1

setTimeout(autoSlide, 1000);

将旧计时器句柄传递给setInterval，这将无效。再次通过该功能：

autoSlide = setTimeout(auto, 1000);

另请注意，setTimeout将设置一个仅启动一次的计时器，而原始setInterval将设置一个重复计时器，所以你可能想要setInterval那里。

单击子弹导航后设置间隔不起作用

1 个答案: