如何改变图像 [英] How make image change

查看:68
本文介绍了如何改变图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

请我是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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆