JavaScript简单的焦点图，鼠标滑动切换代码

发布时间：2018-08-19 06:28:22 所属栏目：Asp教程来源：站长网

导读：Java Script简单的焦点图，鼠标滑动切换代码，简单的滑动效果，已经经过的优化和修改，虽然还有些不是非常完善，但作为第一次写这样的效果，请大家给点鼓励哦。图片切换是大家在平时经常用到的效果，通过效果你也可以学习到一些有用的JS知识。示例： !DOC

　　JavaScript简单的焦点图，鼠标滑动切换代码，简单的滑动效果，已经经过的优化和修改，虽然还有些不是非常完善，但作为第一次写这样的效果，请大家给点鼓励哦。图片切换是大家在平时经常用到的效果，通过效果你也可以学习到一些有用的JS知识。

　　示例：

<!DOCTYPE html> <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:200px;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="/uploads/common/images/wall1.jpg" width="240" /></li> <li id="two"><img src="/uploads/common/images/wall2.jpg" width="240" /></li> <li id="three"><img src="/uploads/common/images/wall3.jpg" width="240" /></li> <li id="four"><img src="/uploads/common/images/wall4.jpg" width="240" /></li> <li id="five"><img src="/uploads/common/images/wall5.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><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：上饶站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!