| 标题 | js实现非常简单的焦点图切换特效实例 |
| 内容 | 这篇文章主要介绍了js实现非常简单的焦点图切换特效,是一个非常简单的js焦点图切换效果,涉及javascript操作鼠标事件与图片的相关技巧,需要的朋友可以参考下 这是一个非常非常简单的焦点图(更像滑动门)，可供初学者借鉴参考 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <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> <div id="imgbox"> <ul id="pic_list"> <li 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> <ul id="button"> <li 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程序设计有所帮助。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。