如何改变图像 [英] How make image change
本文介绍了如何改变图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
请我是javascript中的新手,并且我尝试按时间间隔更改图像,并且我在阵列中有3个图像,但我的问题是当图像从第一个图像更改为第三个图像时它将停止,但我无法弄清楚我哪里出错了。
我尝试过的事情:
please i am new in javascript and am trying to change an image at interval of times,and i have 3 images in an array,but my problem is that when the image changes from the first image to the 3rd image it will stop,but i can't figure out where i have gone wrong.
What I have tried:
<pre><div id = "photo">
<img id = "img" src = "pic1.jpg" width = "300px" height = "200">
</div>
<script>
var images = ["pic1.jpg","pic2.jpg","pic3.jpg"];
var count = 0;
function add(){
document.getElementById('img').src = images[count];
count++;
if(count == images.lenght){
count = 0;
}
}
setInterval('add()',2000);
count++;
</script>
推荐答案
参考这个简单的解决方案并自行定制。
refer this simple solution and customize it on your own.
<!doctype html>
<html lang="en">
<head>
</head>
<body >
<img id="img" width="300px" height="200">
<script>
var images = [
'https://upload.wikimedia.org/wikipedia/en/thumb/3/30/Java_programming_language_logo.svg/155px-Java_programming_language_logo.svg.png',
'https://upload.wikimedia.org/wikipedia/en/thumb/9/9e/JQuery_logo.svg/524px-JQuery_logo.svg.png',
'https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/AngularJS_logo.svg/695px-AngularJS_logo.svg.png'
];
var img = document.getElementById('img');
var i = 0;
window.setInterval(function () {
img.src = images[i];
i++;
if (i == images.length )
i = 0;
}, 1000);
</script>
</body>
</html>
参考 Window setInterval()方法 [ ^ ]
JavaScript数组 [ ^ ]
演示: JSFiddle [ ^ ]
refer Window setInterval() Method[^]
JavaScript Arrays[^]
Demo: JSFiddle [^]
这篇关于如何改变图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文