<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} div.mask{width:508px ;height:206px ;margin:100px auto;position: relative;overflow: hidden;} ul{list-style: none;} ul.img{width: 700%;height: 206px;position: absolute;left: 0;top: 0;} ul.img li{float: left;} ul.img li img{width: 508px;height: 206px;} ul.arrow{position:absolute;left:0;top:50%;transform:translateY(-50%);width: 100%;font-size: 30px;text-align: center;color: white;} ul.arrow li{float: left;width: 50px;line-height: 50px;cursor: pointer;background-color:rgba(0,0,0,.8)} ul.arrow li:nth-child(1){float: right;} ul.point{width: 100px; height: 5px;position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);} ul.point li{width:10px;height: 5px;border-radius: 10px;margin-left: 10px;float: left;background-color:rgba(255,0,0,.5) ;cursor: pointer;} ul.point li:nth-child(1){margin-left: 0;} ul.point li.active{transition:all 2s infinite;width: 20px;} </style> </head> <body> <div class="mask"> <ul class="img"> <li> <img src="../img/5b56fefbe2cd3901156b0e70979730da.png" alt="" /> </li> <li><img src="../img/c22ff27949d96c8592b8c91514703ecd.jpg" alt="" /></li> <li><img src="../img/9fb97f15c5a219d7ffdd9ee8f26aa9cc.jpg" alt="" /></li> <li><img src="../img/136e244dcf4130d87633e3f6af7df94d.png" alt="" /></li> <li><img src="../img/1cea15a7acb21dd44df8a6ee3dd7ea45.jpg" alt="" /></li> </ul> <ul class="point"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul class="arrow aww"> <li>></li> <li><</li> </ul> </div> </body> <script type="text/javascript" src="../js/move.js" ></script> <script> function getByclassName(classname){ var arr=[]; var doM=document.getElementsByTagName('*'); for(var i=0;i<doM.length;i++){ var index=doM[i]; if(index.className.indexOf(classname)==0){ arr.push(index); } } return arr; } function updatePoint(index){ for(var i=0;i<getByclassName('point')[0].children.length;i++){ getByclassName('point')[0].children[i].className=''; } getByclassName('point')[0].children[index].className='active'; } window.onload=function(){ var tt=new aPisplay(); } 1、把嵌套函数抽出来。 函数不能嵌套,把函数拆分出来:利用原型:(property.属性)将他们分出来; 变量变成全局变量 2、去掉onload,写上this 分清this的对象是谁,是这个方法还是这个对象! function aPisplay(){//构造函数 /*封装的getbyclassname开始*/ /*封装的getbyclassname结束*/ this.oArrow=getByclassName("arrow")[0];//自己封装的getclassname; this.oPoint=getByclassName('point')[0]; this.oIMG=getByclassName('img')[0]; this.oMask=getByclassName('mask')[0]; this.oIMG.now=0; /*克隆图片开始*/ /*var liFirst=oIMG.children[0].cloneNode(true); var liLast=oIMG.children[4].cloneNode(true); oIMG.appendChild(liFirst); oIMG.insertBefore(liLast,oIMG.children[0]);*/ //console.log(liFirst,liLast); // oIMG.style.left=-oMask.offsetWidth+'px'; /*克隆图片结束*/ /*单击实现转换开始*/ var _this=this; this.len=this.oIMG.children.length; this.oArrow.children[0].onclick=function(){ _this.click1(); } this.oArrow.children[1].onclick=function(){ _this.click2(); } /*单击实现转换结束*/ /*单击点的转换开始*/ /*单击开始*/ this.init(); /*单击结束*/ /*单击点的转换结束*/ /*自动播放开始*/ this.autoPlay(); /*自动播放结束*/ /*鼠标移动在Omask上面时停止播放开始*/ this.oMask.onmouseenter=function(){ _this.mouseenter(); } this.oMask.onmouseleave=function(){ _this.mouseleave(); } /*鼠标移动在Omask上面时停止播放结束*/ } aPisplay.prototype.mouseleave=function(){ this.autoPlay(); } aPisplay.prototype.mouseenter=function(){ clearInterval(this.oIMG.time); } aPisplay.prototype.click1=function(){ if(this.oIMG.now==this.len-1){ this.oIMG.now=0; startMove(this.oIMG,{left:0}); updatePoint(this.oIMG.now); }else{ this.oIMG.now++; this.current=this.oIMG.offsetLeft; this.target=this.oIMG.now*this.oMask.offsetWidth; this.dis=Math.abs(this.target)-Math.abs(this.current); startMove(this.oIMG,{left:-this.dis+this.current}); //console.log(this.oArrow.children[0]); updatePoint(this.oIMG.now); } } aPisplay.prototype.click2=function(){ if(this.oIMG.now==0){ this.oIMG.now=this.len-1; startMove(this.oIMG,{left:-this.oIMG.now*this.oMask.offsetWidth}); updatePoint(this.oIMG.now); }else{ this.oIMG.now--; this.current=this.oIMG.offsetLeft; this.target=this.oIMG.now*this.oMask.offsetWidth; this.dis=Math.abs(this.target)-Math.abs(this.current); startMove(this.oIMG,{left:-this.dis+this.current}); updatePoint(this.oIMG.now); } } aPisplay.prototype.init=function(){ var _this=this; for(var i=0;i<this.oIMG.children.length;i++){ this.oPoint.children[i].index=i; this.oPoint.children[i].onclick=function(){ _this.click3(this); } } } aPisplay.prototype.click3=function(str){ updatePoint(str.index); startMove(oIMG,{left:-str.index*this.oMask.offsetWidth}); oIMG.now=str.index; } aPisplay.prototype.autoPlay=function(){ var _this=this; clearInterval(this.oIMG.time); this.oIMG.time=setInterval(function(){ _this.click1(); },3000) } </script> </html>
这是我的第二篇,有点小激动
猜你喜欢
转载自blog.csdn.net/myloverisyou_web/article/details/80373914
今日推荐
周排行