自动点击切换按钮切换轮播无缝选项卡 ----原生js

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <meta name="author" content="智能社 - zhinengshe.com" />
  6 <meta name="copyright" content="智能社 - zhinengshe.com" />
  7 <meta name="description" content="智能社是一家专注于web前端开发技术的公司，目前主要提供JavaScript培训和HTML5培训两项服务，同时还推出了大量javascript基础知识教程，智能课堂为你带来全新的学习方法和快乐的学习体验。" />
  8 <title>智能社— http://www.zhinengshe.com</title>
  9 <style>
 10 *{ margin:0; padding:0; list-style:none;}
 11 #box{ width:534px; height:300px; position:relative; margin:50px auto; overflow:hidden;}
 12 #box ul{ position:absolute; left:0; top:0;}
 13 #box ul li{ float:left; width:534px; height:300px;}
 14 #box ul li img{ height:300px;}
 15 
 16 #box a{ transition:.2s all ease;}
 17 #box .prev,#box .next{position:absolute;  top:50%; z-index:2; height:80px; line-height:80px; background:rgba(0,0,0,0.6); color:#fff; width:80px; text-align:center; margin-top:-40px; display:none;}
 18 #box .prev{ left:0;}
 19 #box .next{ right:0;}
 20 #box a:hover{ background:rgba(255,0,0,0.4);}
 21 
 22 #box ol{ position:absolute; width:120px; left:50%; margin-left:-60px; bottom:10px;}
 23 #box ol li{ width:20px; height:20px; background:#f60; float:left; margin:2px; text-align:center; text-indent:-9999px; border-radius:50%;}
 24 #box ol li.active{ background:#fff;}
 25 </style>
 26 <script>
 27 window.onload=function(){
 28     var oBox=document.getElementById('box');
 29     var oPrev=oBox.children[0];
 30     var oNext=oBox.children[1];
 31     var oUl=oBox.getElementsByTagName('ul')[0];
 32     var aLi=oUl.children;
 33     var oOl=oBox.getElementsByTagName('ol')[0];
 34     var aBtn=oOl.children;
 35     
 36     //先复制一份
 37     oUl.innerHTML+=oUl.innerHTML;
 38     //算宽度
 39     oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';
 40     
 41     var W=oUl.offsetWidth/2;
 42     
 43     //移入显示俩按钮
 44     oBox.onmouseover=function(){
 45         clearInterval(timer);
 46         oPrev.style.display='block';
 47         oNext.style.display='block';    
 48     }
 49     oBox.onmouseout=function(){
 50         timer=setInterval(function(){
 51             iNow--;
 52             tab();
 53         },2000);
 54         oPrev.style.display='none';
 55         oNext.style.display='none';    
 56     }
 57     //覆模循环一一对应。
 58     var iNow=0;
 59     
 60     //选项卡
 61     for(var i=0; i<aBtn.length; i++){
 62         (function(index){
 63             aBtn[i].onclick=function(){
 64                 
 65                 if(index==0 && iNow%aBtn.length==aBtn.length-1){//循环一圈后，index=0；iNow%aBtn.length=最后一张图片的时候。iNow都处于
 66                     //++;
 67                     iNow++;    
 68                 }
 69                 if(index==aBtn.length-1 && iNow%aBtn.length==0){//循环一圈后，index=最后一个下标；iNow%aBtn.length=第一张图片的时候。iNow都处于
 70                     //--;
 71                     iNow--;    
 72                 }
 73                 
 74                 if(iNow>0){
 75                     iNow=Math.floor(iNow/aBtn.length)*aBtn.length+index;//Math.floor(iNow/aBtn.length)*aBtn.length  和newMove 对应起来，只要开始动就得走一屏幕。对应的按钮也在对应着变化。
 76                 }else{
 77                     if(index==0 && iNow%aBtn.length==-1){
 78                         iNow++;    
 79                     }
 80                     iNow=Math.floor(iNow/aBtn.length)*aBtn.length+index;    
 81                 }
 82                 tab();
 83                 document.title=iNow;
 84             }
 85         })(i);
 86     }
 87     
 88     function tab(){
 89         for(var i=0; i<aBtn.length; i++){
 90             aBtn[i].className='';
 91         }
 92         if(iNow<0){
 93             aBtn[(iNow%aBtn.length+aBtn.length)%aBtn.length].className='active';
 94         }else{
 95             aBtn[iNow%aBtn.length].className='active';    
 96         }
 97         //oUl.style.left=-iNow*aLi[0].offsetWidth+'px';    
 98         console.log(iNow)
 99         startMove(oUl,-iNow*aLi[0].offsetWidth);
100     }
101     
102     //点击
103     oNext.onclick=function(){
104         iNow++;
105         tab();
106                 
107     }    
108     var timer=null;
109     timer=setInterval(function(){
110         iNow--;
111         tab();
112     },2000);
113     
114     oPrev.onclick=function(){
115         iNow--;
116         tab();
117         
118     }
119     var left=0;
120     function startMove(obj,iTarget){
121         clearInterval(obj.timer);
122         obj.timer=setInterval(function(){
123             var iSpeed=(iTarget-left)/8;//  总的距离/8得到速度。
124                 //判断speed 正负，来取舍不同的值，不能为小数，每次都要求走一个li宽度。
125             iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
126             
127             if(left==iTarget){//判断l=iTaegrt要关闭定时器
128                 clearInterval(obj.timer);
129             }else{
130                 left+=iSpeed;
131                 if(left<0){
132                     obj.style.left=left%W+'px';
133                 }else{
134                     obj.style.left=(left%W-W)%W+'px';    
135                 }
136             }
137             
138         },30);
139     }
140 }
141 </script>
142 </head>
143 
144 <body>
145 <div id="box">
146     <a href="javascript:;" class="prev">prev</a>
147     <a href="javascript:;" class="next">next</a>
148     <ul>
149         <li><img src="img/0.jpg"></li>
150         <li><img src="img/1.jpg"></li>
151         <li><img src="img/2.jpg"></li>
152         <li><img src="img/3.jpg"></li>
153         <li><img src="img/4.jpg"></li>
154     </ul>
155     <ol>
156         <li class="active">0</li>
157         <li>1</li>
158         <li>2</li>
159         <li>3</li>
160         <li>4</li>
161     </ol>
162 </div>
163 </body>
164 </html>
posted on 2016-09-08 21:40 瞅我干啥？阅读(2098) 评论(0) 收藏举报
刷新页面返回顶部
瞅我干啥？

公告

自动 点击切换 按钮切换 轮播无缝选项卡 ----原生js

自动点击切换按钮切换轮播无缝选项卡 ----原生js
