js implements a very simple focus graph switch effect instance

  • 2020-06-07 03:59:39
  • OfStack

This article illustrates how js implements a very simple focus graph switching effect. Share to everybody for everybody reference. The specific analysis is as follows:

This is a very, very simple focus diagram (more like sliding doors) for beginners


<!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> Headless document </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++){
// Set the starting value to start parameter .
 (function(){
 var p=i;
 //  for p The assignment i. i Is equal to the 0,1,2,3,4;
 button[i].onmouseover=function change(){
 //button[0],button[1],button[2],button[3],button[4]
 //onmouseover You can fire a function ;
 for(j=0;j<this.parentNode.childNodes.length;j++){
 // In order to this( The element that currently fires the event ) As a starting point , All the children of the parent node of 
 // the length Value is the highest value , To traverse the . ;
 this.parentNode.childNodes[j].className="";
 // In order to this( The element that currently fires the event ) As a starting point 
 // Of all child nodes of the parent node of className Is empty .  Dangerous careful .;
  }
 this.className="current";
 //this.  That is the current trigger onmouseover The elements of the className for "current";
 for(m=0;m<pics.length;m++){
 // In order to pics.length Traverse for the highest value . traverse pics.;
 pics[m].className="";
 // Clean all pics Of all the elements in the array className;
 if (m==p){
 // when m==p (p==i)  so m=i when , Trigger the following functions 
  pics[m].className="show";
  //pics The first m An element of className A value of show; m In this case is equal to i;
  }
 }
 }
 })();
 }
}
autoplay(0);
})();
</script>
</body>
</html>

Hopefully, this article has been helpful in your javascript programming.


Related articles: