使用js实现简单轮播图

来源：互联网发布：淘宝客返利在哪里查看编辑：程序博客网时间：2024/06/04 17:46

<html><head><style>#lunbo{position: relative;width: 500px;height: 300px;}#lunbo img{position: absolute;}#xiaoyuan{width: 300px;height: 50px;position: relative;}#xiaoyuan li{width: 10px;height: 10px;list-style:none;border-radius: 50%;background: black;float: left;margin: 0px 10px;}#xiaoyuan ul{position: absolute;top: 50%;left: 50%;margin-top:-5px;margin-left: -75px;padding: 0px;width: 150px;height: 10px;}#haha{position: absolute;bottom: 30px;left: 50%;margin-left: -150px;}</style></head><body><input type="submit" submit="return false;"/><div id="lunbo"><img id="img" src="imgs/0.png" height="600" width="1920" style="width:500px;height:300px;" /><div id="haha"><div id="xiaoyuan"><ul><li style="background:green" onmousemove="mousemove(this)" onmouseout="mouseout(this)"></li><li onmousemove="mousemove(this)" onmouseout="mouseout(this)"></li><li onmousemove="mousemove(this)" onmouseout="mouseout(this)"></li><li onmousemove="mousemove(this)" onmouseout="mouseout(this)"></li><li onmousemove="mousemove(this)" onmouseout="mouseout(this)"></li></ul></div></div></div></body><script>var i=1;var list=document.getElementsByTagName("li");//轮播函数function xiaopin(){if(i>4){i=i%5;}for(var m=0;m<list.length;m++){if(list[m].style.backgroundColor=="green"){list[m].style.backgroundColor="black";}list[i].style.backgroundColor="green";}document.getElementById("img").src="imgs/"+i+".png";i++;}//设置并开启一个定时器var a=setInterval(xiaopin, 2000);//鼠标摸进去事件function mousemove(obj){for(var m=0;m<list.length;m++){if(list[m].style.backgroundColor=="green"){list[m].style.backgroundColor="black";document.getElementById("img").src="imgs/"+m+".png";i=m+1;}}obj.style.backgroundColor="green";clearInterval(a);}//鼠标摸出来时间function mouseout(obj){setTimeout(function(){}, 2000);a=setInterval(xiaopin, 2000);}</script></html>

效果如图：

及时复习，多总结，多学习，哇咔咔，不要在懒惰了

阅读全文

0 0