js实现非常简单的焦点图切换特效实例

前端技术 2023/09/02 JavaScript

本文实例讲述了js实现非常简单的焦点图切换特效的方法。分享给大家供大家参考。具体分析如下：

这是一个非常非常简单的焦点图（更像滑动门），可供初学者借鉴参考

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" 
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />
<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\" class=\"bbbb\">
  <ul id=\"pic_list\" class=\"aaaa\">
   <li class=\"show\" id=\"one\">
   <img src=\"images/1317279971_77011100.jpg\" width=\"240\" />
   </li>
   <li id=\"two\">
   <img src=\"images/1317279972_01691900.jpg\" width=\"240\" />
   </li>
   <li id=\"three\">
   <img src=\"images/1317279973_69082200.jpg\" width=\"240\" />
   </li>
   <li id=\"four\">
   <img src=\"images/1317281054_38572100.jpg\" width=\"240\" />
   </li>
   <li id=\"five\">
   <img src=\"images/1317281056_61630800.jpg\" width=\"240\" />
   </li>
  </ul>
 </div>
 <div class=\"button\" class=\"dddd\">
  <ul id=\"button\" class=\"cccc\">
   <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;
var start;
function autoplay(start){for(i=start;i<button.length;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.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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/3837

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案