js实现图片轮播

来源：互联网发布：厘米换算英尺英寸c语言编辑：程序博客网时间：2024/06/05 04:58

一、不使用数组来实现轮播
思路：首先是把图片的src改变；图片是1.jpg,2/jpg,3.jpg,4.jpg,主要是要有一个变量来存储每当你过了3秒的时候就使这个变量加1，可以使用一个匿名函数放到计时器中，每当3秒调用这个匿名函数的时候，就使变量加1，这是把这个变量传到另一个方法中，这个方法是通过变量来改变图片地址

function changeImg(a) {            document.getElementById("lb").src = "sd/"+a+".jpg";        }

总的代码

<script>        var a=2;        function changeImg(a) {            document.getElementById("lb").src = "sd/"+a+".jpg";        }        setInterval(function () {            changeImg(a);            a++;            if(a>4){                a=1;            }        },3000);    </script></head><body><div><img id="lb" src="sd/1.jpg"></div></body>

二、简便写法（外加鼠标移入时停止，鼠标移走时继续）

<script>        var a=1;        function changeImg() {            if(a>4){                a=1;            }            a++;            document.getElementById("lb").src = "sd/"+a+".jpg";        }        var time = setInterval("changeImg()",3000);        function stop() {            clearInterval(time);        }        function start() {            setInterval("changeImg()",3000);        }    </script></head><body><div><img id="lb" src="sd/1.jpg" onmouseover="stop();" onmouseout="start();"></div></body>

三、利用数组进行。

阅读全文

'); })();