JavaScript简朴的核心图，鼠标滑动切换代码

发布时间：2018-08-17 10:22:14 所属栏目：编程来源：站长网

导读：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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys