Question

我正在使用纯javascript实现图片幻灯片，所以我只需要一个javascript解决方案。

我有一组5张图片，我正在隐藏并使用setInterval显示图像。

我有一个选择列表，用于更改图像的变化率，即setInterval的延迟。

我几乎已经实现了幻灯片放映，但是当我更改图像的更改速率时，我遇到了一个小问题，而且我无法找到在页面加载时启动幻灯片放映的解决方案。

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style>
    .item{
        width: 1024px;
        height: auto;
        display: none;
    }
    .active{
        width: 1024px;
        height: auto;
        display: block;
    }
    </style>
</head>
<body>

    <select id="speedo">
        <option value="1">1 sec</option>
        <option value="2">2 sec</option>
        <option value="3">3 sec</option>
        <option value="4">4 sec</option>
        <option value="5">5 sec</option>
    </select>

    <div class="container">
        <img class="item" src="http://i58.tinypic.com/xp4isn.jpg" data-index='0'>
        <img class="item" src="http://i59.tinypic.com/212u39z.jpg" data-index='1'>
        <img class="item" src="http://i61.tinypic.com/63vbc2.jpg" data-index='2'>
        <img class="item" src="http://i60.tinypic.com/wb2iaq.jpg" data-index='3'>
        <img class="item" src="http://i60.tinypic.com/ejvqxe.jpg" data-index='4'>
    </div>

    <script>
        var index=0;
        var elemarray = document.querySelectorAll('.item');
        var speedElement = document.getElementById("speedo");
        window.delay = 1000;

        speedElement.addEventListener('change',function(){
            if(timer) window.clearInterval(timer);
            window.delay = parseInt(this.value)*1000;
            var timer = setInterval("rotate()", window.delay);
        })
        function rotate(){
            console.log(delay);
            index++;
            if(index==5) index = 0;
            for(var i=0, len = elemarray.length; i<len; i++){
                (elemarray[i].getAttribute('data-index')==index)?elemarray[i].setAttribute('class','active') : elemarray[i].setAttribute('class','item');
            }
        }
    </script>
</body>
</html>

问题1.如何摆脱故障？
问题2.如何在页面加载时启动幻灯片？

Answer 1

问题1）您需要初始化timer。你一遍又一遍地创造它。这就是你的故障来自哪里。

问题2）您需要开始间隔。

问题3）请勿在{{1}}内使用字符串函数。

setInterval

<select id="speedo">
    <option value="1" class="active">1 sec</option>
    <option value="2">2 sec</option>
    <option value="3">3 sec</option>
    <option value="4">4 sec</option>
    <option value="5">5 sec</option>
</select>

<div class="container">
    <img class="item" src="http://i58.tinypic.com/xp4isn.jpg" data-index='0'>
    <img class="item" src="http://i59.tinypic.com/212u39z.jpg" data-index='1'>
    <img class="item" src="http://i61.tinypic.com/63vbc2.jpg" data-index='2'>
    <img class="item" src="http://i60.tinypic.com/wb2iaq.jpg" data-index='3'>
    <img class="item" src="http://i60.tinypic.com/ejvqxe.jpg" data-index='4'>
</div>

的的jsfiddle ： http://jsfiddle.net/4RtRV/2

Answer 2

您的计时器变量在侦听器范围内声明，您需要将其放在外面：

        var timer ;
        speedElement.addEventListener('change',function(){
            changeTimer(this.value);
        })
        changeTimer(1);
        function changeTimer(val){
            if(timer) window.clearInterval(timer);
            window.delay = parseInt(val)*1000;
            timer = setInterval("rotate()", window.delay);        
        }

setInterval：通过按钮单击更改延迟时出现故障

2 个答案: