需要使用开始和停止按钮使用setInterval（）循环图像。（仅使用javascript0）_Javascript

需要使用开始和停止按钮使用setInterval（）循环图像。（仅使用javascript0）

javascript

需要使用开始和停止按钮使用setInterval（）循环图像。（仅使用javascript0）,javascript,Javascript,很抱歉，我是一个新手。这是我上javascript速成课程的第一周，我知道noobs非常烦人。无论如何，我无法让你的建议发挥作用。我尝试了一些不同的方法，并让它发挥作用，但现在，一旦我按下“停止幻灯片放映”，我就无法让幻灯片从它停止的地方（或根本无法）重新开始.有什么想法吗 <!DOCTYPE html> <html> <head> <title></title> </head> <body> &

很抱歉，我是一个新手。这是我上javascript速成课程的第一周，我知道noobs非常烦人。无论如何，我无法让你的建议发挥作用。我尝试了一些不同的方法，并让它发挥作用，但现在，一旦我按下“停止幻灯片放映”，我就无法让幻灯片从它停止的地方（或根本无法）重新开始.有什么想法吗

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div>
        <img src="http://joemiller.us/wp-content/uploads/beautiful-birds-wallpapers_blue-bird-wallpaper-free.jpg" alt="Birds" id="image" style="height: 200px; width: 200px">
        <br>
        <button type="button" onclick="startShow()">Start Slideshow</button>    
        <button type="button" onclick="stopShow()">Stop Slideshow</button>  
    </div>
    <script>
        var images = [
            'http://joemiller.us/wp-content/uploads/beautiful-birds-wallpapers_blue-bird-wallpaper-free.jpg',
            'http://www.hgsitebuilder.com/files/writeable/uploads/hostgator172932/image/exoticbirds2.jpg',
            'http://melleum.com/data/uploads/6/280423-birds.jpg',
            'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTBew8yyadE865lI-dSdg2XgNIREm1RZVhQpzjN3HzmmLwuR0_j',
            'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSvo3Aew9HAc2PXVaHz9ghtr-_F9D7ZqySzRLbvPwG6mzmMsBaVHQ'
            ];
        var img = document.getElementById('image');
        var i = 0;
        var start = setInterval("cycleImages ()", 3000);
        function cycleImages () {   
            if (i < images.length-1) {
                i++;
            } else {
                i=0;
            }
            img.src = images[i];
        }
        function startShow () {
            start;
        }
        function stopShow () {
            clearInterval(start);
        }
    </script>
</body>
</html>




开始幻灯片放映
停止幻灯片放映
变量图像=[
'http://joemiller.us/wp-content/uploads/beautiful-birds-wallpapers_blue-bird-wallpaper-free.jpg',
'http://www.hgsitebuilder.com/files/writeable/uploads/hostgator172932/image/exoticbirds2.jpg',
'http://melleum.com/data/uploads/6/280423-birds.jpg',
'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTBew8yyadE865lI-dSdg2XgNIREm1RZVhQpzjN3HzmmLwuR0'，
'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSvo3Aew9HAc2PXVaHz9ghtr-_F9D7ZQYSZRRLBVPWG6MZMMBSAVHQ'
];
var img=document.getElementById（'image'）；
var i=0；
var start=setInterval（“cycleImages（）”，3000）；
函数cycleImages（）{
如果（i

尽管你看起来有点像一个送礼者，但这里有一种方法：

var图像=[
'http://joemiller.us/wp-content/uploads/beautiful-birds-wallpapers_blue-bird-wallpaper-free.jpg',
'http://www.hgsitebuilder.com/files/writeable/uploads/hostgator172932/image/exoticbirds2.jpg',
'http://upic.me/i/z2/birds-bird_928268.jpg',
'http://melleum.com/data/uploads/6/280423-birds.jpg',
'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTBew8yyadE865lI-dSdg2XgNIREm1RZVhQpzjN3HzmmLwuR0'，
'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSvo3Aew9HAc2PXVaHz9ghtr-_F9D7ZQYSZRRLBVPWG6MZMMBSAVHQ'
];
var指数=0；
无功延迟=1000；
var slideshowImage=document.getElementById（'slideshow-image'）；
var startButton=document.getElementById（'start'）；
var stopButton=document.getElementById（'stop'）；
无功定时器；
startButton.addEventListener（'click'，start'）；
stopButton.addEventListener（“单击”，停止）；
函数start（）{
清除间隔（计时器）；
setAttribute（'src'，images[imageIndex]）；
定时器=设置间隔（函数（）{
imageIndex=imageIndex>=（images.length-1）？0:++imageIndex；
setAttribute（'src'，images[imageIndex]）；
}，延误）；
}
函数停止（）{
清除间隔（计时器）；
}

#幻灯片图像{
最大宽度：320px；
}


开始
停止

在元素

存在后，您可以在setInterval函数中使用a的next

var tag = document.getElementById('image'),
    srcs = ['http://google.com/favicon.ico', 'http://www.yahoo.com/favicon.ico', 'http://www.bing.com/favicon.ico'];

function* loop(tag, srcs) {
    var i = 0;
    while (1) {
        yield tag.src = srcs[i++ % srcs.length];
    }
}

var gen = loop(tag, srcs);
setInterval(gen.next.bind(gen), 500);

看起来不错，但我认为你应该在设置间隔之前清除间隔（以防用户点击开始按钮两次）。我不太明白你们写了什么，我无法让它以那种方式工作，但我让它以另一种方式工作。只是现在，一旦我按下停止键，我就无法再次开始幻灯片放映。