js实现非常简单的焦点图切换特效实例
本文实例讲述了js实现非常简单的焦点图切换特效的方法。分享给大家供大家参考。具体分析如下：
这是一个非常非常简单的焦点图（更像滑动门），可供初学者借鉴参考
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>无标题文档</title>
<styletype="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none;}
.mid{margin:0auto;}
.area{
width:240px;height:270px;
overflow:hidden;background:#999;
margin-top:150px;position:relative;
}
#pic_list{
position:relative;
}
#pic_listli{
position:absolute;visibility:hidden;
}
#pic_listli.show{
visibility:visible;
}
#pic_listliimg{
vertical-align:middle;
}
.button{
width:240px;height:20px;
line-height:20px;background:#ccc;
position:absolute;bottom:0px;
}
#button{
float:right;
}
#buttonli{
float:left;width:20px;height:20px;
text-align:center;margin:03px;
font-family:"Arial";font-size:12px;
color:#fff;background:#000;
}
#buttonli.current{
background:#f00;cursor:pointer;
}
</style>
</head>
<body>
<divclass="areamid">
<divid="imgbox"class="bbbb">
<ulid="pic_list"class="aaaa">
<liclass="show"id="one">
<imgsrc="images/1317279971_77011100.jpg"width="240"/>
</li>
<liid="two">
<imgsrc="images/1317279972_01691900.jpg"width="240"/>
</li>
<liid="three">
<imgsrc="images/1317279973_69082200.jpg"width="240"/>
</li>
<liid="four">
<imgsrc="images/1317281054_38572100.jpg"width="240"/>
</li>
<liid="five">
<imgsrc="images/1317281056_61630800.jpg"width="240"/>
</li>
</ul>
</div>
<divclass="button"class="dddd">
<ulid="button"class="cccc">
<liclass="current"id="but_one">1</li>
<liid="but_two">2</li>
<liid="but_three">3</li>
<liid="but_four">4</li>
<liid="but_five">5</li>
</ul>
</div>
</div>
<scripttype="text/javascript">
(function(){
varimgbox=document.getElementById("imgbox");
varpic_list=document.getElementById("pic_list");
varpics=pic_list.getElementsByTagName("li");
varbutton=document.getElementById("button").getElementsByTagName("li");
varp;
varstart;
functionautoplay(start){for(i=start;i<button.length;i++){
//设置起始值为start参数.
(function(){
varp=i;
//为p赋值i.i等于0,1,2,3,4;
button[i].onmouseover=functionchange(){
//button[0],button[1],button[2],button[3],button[4]
//onmouseover可以触发函数;
for(j=0;j<this.parentNode.childNodes.length;j++){
//以this(当前触发事件的元素)为起点,的父节点的所有子节点
//的length值为最高值,开始遍历.;
this.parentNode.childNodes[j].className="";
//以this(当前触发事件的元素)为起点
//的父节点的所有子节点的className为空.危险慎用.;
}
this.className="current";
//this.即当前触发onmouseover的元素的className为"current";
for(m=0;m<pics.length;m++){
//以pics.length为最高值进行遍历.遍历pics.;
pics[m].className="";
//清空所有pics数组中所有元素的className;
if(m==p){
//当m==p(p==i)所以m=i时,触发下列函数
pics[m].className="show";
//pics的第m个元素的className值为show;m在这里等于i;
}
}
}
})();
}
}
autoplay(0);
})();
</script>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。