自動點擊切換按鈕切換輪播無縫選項卡 ----原生js

本文轉載自查看原文 2016-09-08 21:40 1763

  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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js原生選項卡（自動播放無縫滾動輪播圖）二 js原生選項卡（包含無縫滾動輪播圖）一 JS實現選項卡切換 javascript 原生JS實現選項卡的切換(兩種方法) js實現網頁tab選項卡切換效果 JS實現選項卡切換效果 js實現tab選項卡切換 HTML 選項卡切換 JQ實現選項卡切換 Js原生封裝選項卡組件

自動 點擊切換 按鈕切換 輪播無縫選項卡 ----原生js

免責聲明！

自動點擊切換按鈕切換輪播無縫選項卡 ----原生js