javascript 实现图片轮播和点击切换功能
图片轮播是网页上一个比较常见的功能，下面我们来实现他吧
原理很简单：
1：固定的区域，所有的图片重叠，一次只能显示一张图片
2：通过改变图片的zIndex属性改变显示的图片，就可以达到切换的效果了
<!-- cycle_pic.html --> <!DOCTYPE html> <html> <head> <title>cycle_pic</title> <meta charset="utf-8"> <meta content="text/html" http-equiv="Content-Type"> <style type="text/css"> #slideshow_wrapper { POSITION: relative; PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #121212; PADDING-LEFT: 0px; WIDTH: 650px; PADDING-RIGHT: 0px; HEIGHT: 400px; OVERFLOW: hidden; PADDING-TOP: 0px } #slideshow_footbar { Z-INDEX: 5; POSITION: absolute; FILTER: alpha(opacity=50); WIDTH: 100%; BOTTOM: 0px; HEIGHT: 30px; background-color: black; opacity:0.5; } #slideshow_photo { POSITION: absolute; WIDTH: 100%; HEIGHT: 100%; CURSOR: pointer } #slideshow_photo A { Z-INDEX: 1; BORDER-BOTTOM: 0px; POSITION: absolute; BORDER-LEFT: 0px; MARGIN: 0px; DISPLAY: block; BORDER-TOP: 0px; TOP: 0px; BORDER-RIGHT: 0px; LEFT: 0px } #slideshow_footbar .slideshow-bt { BACKGROUND-COLOR: #d2d3d4; MARGIN: 10px 10px 0px 0px; WIDTH: 10px; DISPLAY: inline; FLOAT: right; HEIGHT: 10px; FONT-SIZE: 0px } #slideshow_footbar .bt-on { BACKGROUND-COLOR: red; } </style> <script type="text/javascript" charset="utf-8"> var curIndex=1;//初始换显示第一张 function slideTo (index) { var index = parseInt(index); var pic = document.getElementById("slideshow_photo").childNodes; for(var i=0;i<pic.length;i++){//改变zIndex属性 if(pic[i].attributes && pic[i].attributes['index'] && parseInt(pic[i].attributes['index'].value)==index){ pic[i].style.zIndex=2; curIndex=index; } else if(pic[i].attributes && pic[i].attributes['index']) { pic[i].style.zIndex=1; } } var bts = document.getElementsByClassName("slideshow-bt"); for(var i=0;i<bts.length;i++){//改变显示的效果 if(parseInt(bts[i].attributes['index'].value)==index){ bts[i].className="slideshow-bt bt-on"; } else bts[i].className = "slideshow-bt"; } } window.onload = function () { //为按钮初始化onclick事件 var bts = document.getElementsByClassName("slideshow-bt"); for(var i=0;i<bts.length;i++){ bts[i].onclick = function () { slideTo(this.attributes['index'].value); } } } setInterval(function () {//循环切换 if(curIndex+1>5) curIndex=0; slideTo(curIndex+1); },2000); </script> </head> <body> <div id="slideshow_wrapper"> <div id="slideshow_photo"> <a href="#" title="" index="1"><img src="./num/1.jpg" width="650px;" alt="1" border="0px;"></a> <a href="#" title="" index="2"><img src="./num/2.jpg" width="650px;" alt="2" border="0px;"></a> <a href="#" title="" index="3"><img src="./num/3.jpg" width="650px;" alt="3" border="0px;"></a> <a href="#" title="" index="4"><img src="./num/4.jpg" width="650px;" alt="4" border="0px;"></a> <a href="#" title="" index="5"><img src="./num/5.jpg" width="650px;" alt="5" border="0px;"></a> </div> <div id="slideshow_footbar"> <div class="slideshow-bt" index="5"></div> <div class="slideshow-bt" index="4"></div> <div class="slideshow-bt" index="3"></div> <div class="slideshow-bt" index="2"></div> <div class="slideshow-bt" index="1"></div> </div> </div> </body> </html>
