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>
时间： 2024-10-29 12:25:29