html代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>轮播图</title> <style type="text/css"> .focusBox{ position: absolute; top: 340px; width: 120px; left: 50%; margin-left: -60px; list-style: none; margin-top: 0px; margin-bottom: 0px; } .focusBox li{ float: left; margin-right:10px; width: 15px; height: 15px; border-radius: 10px; background: gray; cursor: pointer; } .focusBox li.cur{ background: #f60; opacity: 0.6; filter: alpha(opacity=60); } #focus{ margin: 0 auto; padding: 0px; text-align: center; border: red solid 1px; width: 710px; } </style> </head> <body> <div id="focus"> <img src="img/index/pic1.jpg" width="690px" height="350px" id="focusImg"/> <ul class="focusBox"> <li onclick="showPic(1);"></li> <li onclick="showPic(2);"></li> <li onclick="showPic(3);"></li> </ul> </div> <script src="js/pictureSlide.js" type="text/javascript" charset="utf-8"></script> <!--<script> var sign=2; function showPic (index) { var focusImg=document.getElementById("focusImg"); var imgSrc="img/index/pic"; imgSrc=imgSrc+index+".jpg"; focusImg.src=imgSrc; var lis =document.getElementsByClassName("focusBox")[0].getElementsByTagName("li"); for (var i=0;i<lis.length;i++) { lis[i].className=""; } lis[index-1].className="cur"; } function setCurrentPic () { showPic(sign); sign++; if (sign==4) { sign=1; } } window.onload=function () { showPic(1); } window.setInterval("setCurrentPic()",2000); </script>--> </body> </html>
js代码
// 图片轮播效果 //用于标识当前轮播到第几幅图片 var sign = 2; //显示轮播图片 function showPic(index) { //轮播效果,中当前显示的图片 var focusImg = document.getElementById("focusImg"); //图片路径 var imgSrc = "img/index/pic"; imgSrc =imgSrc+ index + ".jpg"; //更换轮播图片 focusImg.src = imgSrc; //获取圆点列表 var lis = document.getElementsByClassName("focusBox")[0].getElementsByTagName("li"); //移除所有轮播按钮的css样式 for (var i = 0; i < lis.length; i++) { lis[i].className = ""; } //设置轮播图片对应的轮播按钮样式 lis[index - 1].className = "cur"; } //对轮播图片进行计算处理 function setCurrentPic() { showPic(sign); sign++; if (sign == 4) { sign = 1; } } //窗体加载时,指定显示的图片 window.onload = function () { showPic(1); } //设置定时器 window.setInterval("setCurrentPic()",1500);