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{ 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; 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; 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; 120px; left:50%; margin-left:-60px; bottom:10px;} 23 #box ol li{ 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>