javascript简单的轮播图

来源：互联网发布：淘宝购买手机模板编辑：程序博客网时间：2024/04/29 06:41

回顾js时写了个简易的轮播图效果

其效果为：大图自动轮播，当鼠标浮在小图标上时，大图停住，小图标有被选中的红色边框

其代码为：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>轮播图</title><style type="text/css">* {margin: 0 auto;}#container {width: 500px;height: 500px;background-color: blanchedalmond;text-align: center;}#container_son {margin: 10px;}</style></head><body><div id="container"><img id="pic" src="img/1.jpg" width="400px" height="400px" /><div id="container_son"><img src="img/1.jpg" width="100px" height="80px" id="img1" onmouseover="showPic(1)" onmouseout="movePic()"/><img src="img/2.jpg" width="100px" height="80px" id="img2" onmouseover="showPic(2)" onmouseout="movePic()"/><img src="img/3.jpg" width="100px" height="80px" id="img3" onmouseover="showPic(3)" onmouseout="movePic()"/></div></div></body><script type="text/javascript">var intervalId = setInterval("lunBo()", 200);var i = 1;function lunBo() {i++;if(i > 3) {i = 1;}document.getElementById("pic").src = "img/" + i + ".jpg";}function showPic(num){clearInterval(intervalId);document.getElementById("img"+num).style.border = "2px solid red";document.getElementById("pic").src = "img/" + num + ".jpg";}function movePic(){intervalId = setInterval("lunBo()", 200);document.getElementById("img1").style.border = "0px";document.getElementById("img2").style.border = "0px";document.getElementById("img3").style.border = "0px";}</script></html>

1 1