javascript实现的焦点图轮播效果详解
本章节分享一段代码实例，它实现并不完善的焦点图轮播效果。
但是也实现了基本的功能，就当是我们对于一些知识的学习，总之一个完善的功能都是由零碎的小功能实现的。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
ul, li{
list-style:none;
}
.mid{
margin:0 auto;
}
.area{
width:240px;
height:270px;
overflow:hidden;
background:#999;
margin-top:150px;
position:relative;
}
#pic_list{
position:relative;
}
#pic_list li{
position:absolute;
visibility:hidden;
}
#pic_list li.show{
visibility:visible;
}
#pic_list li img{
vertical-align:middle;
}
.button{
width:240px;
height:20px;
line-height:20px;
background:#ccc;
position:absolute;
bottom:0px;
}
#button{
float:right;
}
#button li{
float:left;
width:20px;
height:20px;
text-align:center;
margin:0 3px;
font-family:"Arial";
font-size:12px;
color:#fff;
background:#000;
}
#button li.current{
background:#f00;
cursor:pointer;
}
</style>
</head>
<body>
<div class="area mid">
<div id="imgbox">
<ul id="pic_list">
<li class="show" id="one"><img src="img/1.jpg" width="240" alt="one" /></li>
<li id="two"><img src="img/2.jpg" width="240" alt="two" /></li>
<li id="three"><img src="img/3.jpg" width="240" alt="three" /></li>
<li id="four"><img src="img/4.jpg" width="240" alt="four" /></li>
<li id="five"><img src="img/5.jpg" width="240" alt="five" /></li>
</ul>
</div>
<div class="button">
<ul id="button">
<li class="current" id="but_one">1</li>
<li id="but_two">2</li>
<li id="but_three">3</li>
<li id="but_four">4</li>
<li id="but_five">5</li>
</ul>
</div>
</div>
<script type="text/javascript">
(function(){
var imgbox = document.getElementById("imgbox");
var pic_list = document.getElementById("pic_list");
var pics = pic_list.getElementsByTagName("li");
var button = document.getElementById("button").getElementsByTagName("li");
var p;
function autoplay(start){
for(index=start;index<button.length;index++){
(function(){
var p=index;
button[index].onmouseover=function change(){
for(j=0;j<this.parentNode.childNodes.length;j++){
this.parentNode.childNodes[j].className="";
}
this.className="current";
for(m=0;m<pics.length;m++){
pics[m].className="";
if(m==p){
pics[m].className="show";
}
}
}
})();
}
}
autoplay(0);
})();
</script>
</body>
</html>
上面的代码实现了简单的轮播效果，但是不能够自己进行轮播，只能鼠标悬浮才能够实现切换。
好在我们就当做对知识的学习，对于实际应用的话此代码还需要完善，下面介绍一下它的实现过程。
一.代码注释:
（1）.(function(){})()，一个匿名自执行函数。
（2）.var imgbox = document.getElementById("imgbox")，获取id属性值为imgbox的元素对象。
（3）.var pic_list = document.getElementById("pic_list")，获取id属性值为pic_list的元素对象。
（4）.var pics = pic_list.getElementsByTagName("li")，获取pic_list下的li元素集合，也就是放置图片的地方。
（5）.var button = document.getElementById("button").getElementsByTagName("li")，获取底部数字按钮集合。
（6）.var p,声明一个变量用来存储当前数字按钮的索引。
（7）.function autoplay(start){}，此函数实现了各种轮播准备工作，比如事件处理函数的绑定,参数规定从哪个图开始轮播。
（8）.for(index=start;index<button.length;index++){}，遍历每一个数字按钮元素。
（9）.(function(){})()，一个匿名自执行函数，使用这个方式实现了闭包效果，p存储的就是当前元素额索引。
（10）.var p=index,把当前元素索引赋值给变量p。
（11）.button[index].onmouseover=function change(){}，为按钮注册onmouseover事件处理函数。
（12）.for(j=0;j<this.parentNode.childNodes.length;j++){
this.parentNode.childNodes[j].className="";
}，遍历按钮元素，然后将按钮元素的class属性值清空。
（13）.this.className="current",设置当前按钮的class属性值为current。
（14）.for(m=0;m<pics.length;m++){
pics[m].className="";
if(m==p){
pics[m].className="show";
}
},遍历每一个存放图片的li元素，然后清空元素的class属性值。
然后设置对应的索引的图片li元素class属性值为show，这样图片就可以显示。
二.相关阅读:
（1）.getElementsByTagName()方法可以参阅document.getElementsByTagName()一章节。
（2）.onmouseover事件可以参阅javascript mouseover事件一章节。
（3）.parentNode可以参阅parentNode一章节。
（4）.className可以参阅js className一章节。