Javascript 单击项目符号导航后设置间隔不起作用_Javascript_Jquery_Html_Css

Javascript 单击项目符号导航后设置间隔不起作用

javascript jquery html css

Javascript 单击项目符号导航后设置间隔不起作用,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我已经创建了自己的滑块，现在我面临着在使用bullet导航后再次调用自动滑动设置间隔函数的问题。setTimeoutautoSlide，1000；它不起作用。下面给出了我尝试过的代码。请给我一个解决办法。多谢各位 <!doctype html> <head> <title> Custom Slider </title> <style type="text/css"> body {

我已经创建了自己的滑块，现在我面临着在使用bullet导航后再次调用自动滑动设置间隔函数的问题。setTimeoutautoSlide，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>

正在将一个旧的计时器句柄传递到setInterval，这将不起作用。再次传递函数：

autoSlide = setTimeout(auto, 1000);

另外请注意，setTimeout将设置一个只触发一次的计时器，而您原来的setInterval将设置一个重复计时器，因此您可能希望setInterval出现在那里。

什么意思，它不工作？会发生什么？什么事没有发生？有错误吗？为什么选择setTimeout而不是setInterval？当加载页面时，自动滑动正在工作。然后，当我点击子弹时，它也在工作。但在我点击子弹导航后，自动滑动不会再次启动。它停了。这是唯一的问题。我该怎么做？如果下面的答案回答了您关于为什么不重新启动的问题，那么您可以通过单击旁边的复选标记来接受答案。谢谢你的帮助。现在，如果我再次使用setInterval，autoSlide=setIntervalauto，1000；，它就可以工作了；。但我需要设置2秒的延迟，然后开始自动滑动。我该怎么办？@Kowshikan:只需将重启延迟两秒：setTimeoutfunction{autoSlide=setIntervalauto，1000；}，2000；请注意，在重新启动间隔计时器之前，会有两秒钟的延迟，而在间隔计时器第一次启动之前，会有一秒钟的延迟，总共是三秒钟。如果您想要总共两次，请将重新启动延迟一秒，而不是两秒。酷。它的工作时，我点击一次，等待自动幻灯片，并再次点击。但当我连续点击三到四颗子弹时，没有间隙并等待。自动滑梯以不规则的间隔加速，速度与我点击Bulltet的速度相同。有什么问题吗？@Kowshikan：听起来像是重叠的计时器，你需要管理的时间和我们上面已经做的管理计时器一样多。但这是另一个问题。

autoSlide = setTimeout(auto, 1000);