js melaksanakan peta fokus yang sangat mudah menukar kemahiran example

js melaksanakan peta fokus yang sangat mudah menukar kemahiran example_javascript kesan khas

WBOY

Lepaskan： 2016-05-16 16:00:30

asal

1410 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara melaksanakan kesan penukaran peta fokus yang sangat mudah dalam js. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Ini adalah gambar rajah fokus yang sangat, sangat mudah (lebih seperti pintu gelangsar), yang boleh digunakan sebagai rujukan untuk pemula

<!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>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.