首页 > 代码库 > 自动 点击切换 按钮切换 轮播无缝选项卡 ----原生js
自动 点击切换 按钮切换 轮播无缝选项卡 ----原生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=http://www.mamicode.com/"javascript:;" class="prev">prev</a>147 <a href=http://www.mamicode.com/"javascript:;" class="next">next</a>148 <ul>149 <li><img src=http://www.mamicode.com/"img/0.jpg"></li>150 <li><img src=http://www.mamicode.com/"img/1.jpg"></li>151 <li><img src=http://www.mamicode.com/"img/2.jpg"></li>152 <li><img src=http://www.mamicode.com/"img/3.jpg"></li>153 <li><img src=http://www.mamicode.com/"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>
自动 点击切换 按钮切换 轮播无缝选项卡 ----原生js
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。