这篇文章主要介绍了js实现非常简单的焦点图切换特效,是一个非常简单的js焦点图切换效果,涉及javascript操作鼠标事件与图片的相关技巧,需要的朋友可以参考下
这是一个非常非常简单的焦点图(更像滑动门),可供初学者借鉴参考
"">
* {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;
}
(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;
var start;
function autoplay(start){for(i=start;i //设置起始值为start参数. (function(){ var p=i; // 为p赋值i. i等于0,1,2,3,4; button[i].onmouseover=function change(){ //button[0],button[1],button[2],button[3],button[4] //onmouseover可以触发函数; for(j=0;j //以this(当前触发事件的元素)为起点,的父节点的所有子节点 //的length值为最高值,开始遍历. ; this.parentNode.childNodes[j].className=""; //以this(当前触发事件的元素)为起点 //的父节点的所有子节点的className为空. 危险慎用.; } this.className="current"; //this. 即当前触发onmouseover的元素的className为"current"; for(m=0;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); })(); 希望本文所述对大家的javascript程序设计有所帮助。 更多信息请查看IT技术专栏