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程序设计有所帮助。