利用javaScript实现图片轮播器

来源：互联网发布：excel vba sql查询编辑：程序博客网时间：2024/06/08 22:32

最近刚学js，就做了一个可以点击切换图片，和自动播放图片的小例子，献给需要的初学者

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/index.css"><script type="text/javaScript" src="js/index.js"></script></head><body><p>图片轮播器小实例</p><div id="showPic"><img src="image/jpg-1.jpg" alt="" id="Pic"></div><div  class="page"><div id="page1" class="page1">1</div><div id="page2" class="page2">2</div></div></body></html>

@charset "utf-8";#Pic{width: 200px;height: 200px;}.page{width: 200px;height: 20px;}.page1{float: left;}.page2{float: left;}.page div{width: 20px;line-height: 20px;border: 1px solid;}.page div:hover{background: blue;}

//把整个js文件理解成一个类，然后count是一个静态变量；var count = 1;function showPictureByTime(){if(count<2){count++;}else{count=1;}var pic = document.getElementById("Pic");pictureName = "image/jpg-"+count+".jpg";pic.src = pictureName;setTimeout(showPictureByTime,2000);}function showPicture(pictureName,Count){count = Count;var pic = document.getElementById("Pic");pic.src = pictureName;}window.onload = function(){page = document.getElementById("page1");pictureName = "image/jpg-1.jpg";page.addEventListener("mouseover",function(){showPicture(pictureName,1);},false);page2 = document.getElementById("page2");pictureName2 = "image/jpg-2.jpg";page2.addEventListener("mouseover",function(){showPicture(pictureName2,2);},false);showPictureByTime();}

代码有些不足，在图片自动切换和手动切换之间不是很融洽，有兴趣的朋友可以去改善它。

0 0