Question

我不知道该怎么办，因为我今天刚刚开始学习javascript，所以请放轻松。

我认为我需要在间隔时增加它，但我不知道该怎么做，而且我也不想做任何jquery。

<html>
    <head>
        <style type="text/css">
            div {
                height: 300px;
                width: 500px;
                margin: 0 auto;
                overflow: hidden;
            }
        </style>
    </head>
    <body>

        <div>
            <img id="image" src="html.png" alt="HTML">
        </div>

        <script language="javascript" type="text/javascript">

            var i = 1;

            function loop() {
                var i = i + 1;
                if (i == 3) {
                    i = 1;
                }
                if (i == 1) {
                    document.getElementById('image').src = "html.png";
                } else {
                    document.getElementById('image').src = "css3.png";
                }
            }
            var pictureloop = setInterval(loop(), 5000);

        </script>

    </body>
</html>

Answer 1

你必须尝试这个：

只需在i中设置变量loop()，一旦全局声明，就无需重新声明！和从setInterval()方法

中删除()

var i = 1;

function loop() {
    i = i + 1; // Change
    alert(i);
    if (i == 3) {
        i = 1;
    }
    if (i == 1) {
        document.getElementById('image').src = "html.png";
    } else {
        document.getElementById('image').src = "css3.png";
    }
}
setInterval(loop, 5000); //Change

Fiddle Demo

Answer 2

你刚开始学习javascript ??

欢迎;）

function loop(){
 i=++i==3?1:i;
 //i is : if i+1 is 3 then 1 else its i (the already i+1)

 document.getElementById('image').src=(i==1?'html':'css3')+'.png';
 //src is : if i is 1 then html else css3

}
var pictureloop=setInterval(loop,1000),i=1;
//set all vars you need separated by comma.

<强>样本

http://jsfiddle.net/9dZt6/1/

正确的方式

function loop(){
 i=!i;
 document.body.innerHTML=(i?'html':'css3')+'.png'
}
var pictureloop=setInterval(loop,1000),i=1;

<强>样本

http://jsfiddle.net/cRn6n/

另一种方式：html5 css3

CSS

div{
 background:#000 url(html.png) no-repeat center center;
 background-size:contain;// cover,auto,100px 100px 
}
div.odd{
 background-image:url(css3.png);
}

JS

function toggle(){
 var div1=document.getElementsByTagName('div')[0];
 div1.classList.toggle('odd');
 timer=window.setTimeout(toggle,1e3);
}
var timer=window.setTimeout(toggle,1e3);

另一种方式：检查路径

function toggle(){
 img.src=(img.src=='http://path/html.png'?'css3':'html')+'.png';
}
var img=document.getElementById('image'),
    timer=window.setInterval(toggle,1e3);

+1，不使用jquery

https://stackoverflow.com/a/21353032/2450730

如果您有任何问题，请询问。

javascript图像循环不起作用

2 个答案: