首页 > 代码库 > 原生js-焦点图轮播

原生js-焦点图轮播

2024-07-11 23:57:41   219人阅读

首先是html实现页面结构及主程序

 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>基本动画-焦点图轮播</title> 6 <style type="text/css"> 7 #outer{ width:450px; height:230px; position:relative; margin:50px auto; background:pink; overflow:hidden;} 8 #inner{ width:2700px; height:230px; position:absolute; top:0px; left:0;} 9 #inner div{ width:450px; height:230px; float:left; line-height:230px; text-align:center; font-size:36px; font-weight:bold; color:#fff; background:red;}10 ul#btn{ margin:0; padding:0; list-style:none; position:absolute; bottom:15px; right:15px; height:30px; width:230px;}11 ul#btn li{ float:left; width:25px; margin-right:5px; height:25px; border:4px solid orange; border-radius:50%; font-size:24px; font-weight:bold; line-height:25px; text-align:center; background:#366; cursor:pointer; -webkit-user-select:none;  }12 ul#btn li.current{ background:white;}13 </style>14 </head>15 16 <body>17 <div id="outer">18     <div id="inner">19         <div>111111111111</div>20         <div style="background:yellow; color:blue">222222222222</div>21         <div style="background:black;">333333333333</div>22         <div style="background:purple;">444444444444</div>23         <div style="background:blue;">555555555555</div>24         <div>111111111111</div>25     26     </div>27     <ul id="btn">28         <li class="current" >1</li>29         <li >2</li>30         <li >3</li>31         <li >4</li>32         <li >5</li>33     </ul>34 </div>35 </body>36 </html>37 <script src="move.js"></script>38 <script>39 var oLis=document.getElementById(‘btn‘).getElementsByTagName(‘li‘);40 var oInner=document.getElementById(‘inner‘);41 for(var i=0;i<oLis.length;i++){42     oLis.item(i).n=i;43     oLis.item(i).onclick=function(){44         move(oInner,"left",this.n*-450);45     }46 }47 var step=0;48 function autoMove(){49     if(step==oLis.length){//第六个图片对应是第一个li50         oLis.item(0).className="";51     }else{//正常情况下，step在累加之前，总是表示上一个LI的索引52         oLis.item(step).className="";53     }54     step++;55     if(step==oLis.length+1){//如果走到了第六张，则把坐标切换到第一张上来。56         //alert(1);//暂停一下，更能理解原理57         oInner.style.left=0;//切换坐标58         step=1;    //然后再从第一张往第二张上走，所以让step=1；59     }60     if(step==5){//第5个索引（就是第六张）对应的是第一张DIV，所以这儿要做个判断61         oLis.item(0).className="current";62     }else{//正常情况下走到第几张，就让对应的li切换背景63         oLis.item(step).className="current";64     }65     move(oInner,"left",step*-450);66 }67 window.setInterval(autoMove,2000);68 </script>

接下来在move.js里实现辅助函数

 1 function move(ele,attr,target,fnCallback){ 2     clearInterval(ele[attr+"timer"]); 3     function _move(){//闭包方法 4         var cur=css(ele,attr);//当前位置 5         var nSpeed=(target-cur)/10; 6         nSpeed=nSpeed>0?Math.ceil(nSpeed):Math.floor(nSpeed); 7         css(ele,attr,cur+nSpeed); 8         if(nSpeed===0){ 9             clearInterval(ele[attr+"timer"]);    10             ele[attr+"timer"]=null;11             if(typeof fnCallback=="function"){12                 fnCallback.call(ele);13                 //用call去执行fnCallback，则可以让fnCallback在运行的时候，里面的this关键字指向当前运动的这个元素    14             }15             //ele.style.backgroundColor="green";16         }17     }18     ele[attr+"timer"]=window.setInterval(_move,20);    19 }20 21 function css(ele,attr,val){//如果传两个参数，则是取值。三个参数，则赋值22     if(typeof val=="undefined"){23         try{24             return parseFloat(window.getComputedStyle(ele,null)[attr]);25         }catch(e){26             return parseFloat(ele.currentStyle[attr]);27         }28     }else if(typeof val=="number"){29         if(attr=="opacity"){30             ele.style.opacity=val;31             ele.style.filter="alpha(opacity="+val*100+")";32         }else{33             ele.style[attr]=val+"px";34         }35     }    36 }

 


联系
我们