今天学习了一下轮播图的写作，想到前一阵学过的无缝滚动得思想，所以就把轮播与滚动结合了一下。不过我的代码的神逻辑我自己都不敢恭维，在没网没参照的情况下，只能硬着头皮往下写，希望跟大家共勉吧。
js运动框架的代码如下：
1 //获取样式
2 function getStyle(obj,attr){
3 if(obj.currentStyle){
4 return obj.currentStyle[attr];
5 }else{
6 return getComputedStyle(obj,false)[attr];
7 }
8 }
9
10 //运动框架
11 //complete:time,ease,fn
12 function move(obj,json,complete){
13 var dis = {};
14 var start = {};
15 for(var name in json){
16 start[name] = parseInt(getStyle(obj,name));
17 dis[name] = json[name] - start[name];
18 }
19 complete = complete || {};
20 complete.time = complete.time || 1000;
21 complete.ease = complete.ease || "ease-in";
22
23 var count = Math.floor(complete.time/30);
24 var n = 0;
25 clearInterval(obj.timer);
26 obj.timer = setInterval(function(){
27 n++;
28 for(var name in json){
29 switch (complete.ease){
30 case "linear":
31 var a = n/count;
32 var cur = start[name] + dis[name]*a;
33 break;
34 case "ease-in":
35 var a = n/count;
36 var cur = start[name] + dis[name]*a*a*a;
37 break;
38 case "ease-out":
39 var a = 1 - n/count;
40 var cur = start[name] + dis[name]*(1-a*a*a);
41 break;
42 }
43
44 if(name == "opacity"){
45 obj.style.opacity = cur;
46 obj.style.filter = "alpha(opacity="+cur*100 +")";
47 }else{
48 obj.style[name] = cur + "px";
49 }
50 }
51
52 if(n == count){
53 clearInterval(obj.timer);
54 if(complete.fn) complete.fn();
55 }
56 },30)
57 }
运行的效果图如下：
自动轮播，下方红色按钮同时变换，点击左右箭头分别到达上一张或下一张，问题主要是在第一张和最后一张上面。
神逻辑即将出现，请访客给出好建议哦！！
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title></title>
5 <style>
6 *{
7 margin: 0;
8 padding: 0;
9 }
10 #wrap{
11 width: 590px;
12 height: 340px;
13 margin:100px auto;
14 position: relative;
15 overflow: hidden;
16 }
17 #box{
18 position: absolute;
19 left: 0;
20 top: 0;
21 }
22 #box li{
23 width: 590px;
24 height: 340px;
25 list-style: none;
26 float: left;
27 }
28 #btn{
29 position: absolute;
30 left: 50%;
31 margin-left:-100px ;
32 bottom: 20px;
33 }
34 #btn li{
35 width: 30px;
36 height:30px;
37 border-radius: 50%;
38 background: #ccc;
39 float: left;
40 list-style: none;
41 margin-right: 10px;
42 }
43 #btn li.active{
44 background: red;
45 }
46 #wrap a{
47 display: block;
48 width: 50px;
49 height: 50px;
50 background: rgba(0,0,0,0.5);
51 position: absolute;
52 top: 145px;
53 color: #fff;
54 text-decoration: none;
55 line-height: 50px;
56 text-align: center;
57 }
58 #prev{
59 left: 0;
60 }
61 #next{
62 right: 0;
63 }
64 </style>
65 <script src="move.js"></script>
66 </head>
67 <body>
68 <div id="wrap">
69 <ul id="box">
70 <li><img src="img/1.jpg"></li>
71 <li><img src="img/2.jpg"></li>
72 <li><img src="img/3.jpg"></li>
73 <li><img src="img/4.jpg"></li>
74 <li><img src="img/5.jpg"></li>
75 </ul>
76 <ol id="btn">
77 <li class="active"></li>
78 <li></li>
79 <li></li>
80 <li></li>
81 <li></li>
82 </ol>
83 <a id="prev" href="javascript:;">←</a>
84 <a id="next" href="javascript:;">→</a>
85 </div>
86 </body>
87 </html>
88 <script>
89 window.onload = function(){
90 var oWrap = document.getElementById("wrap");
91 var oBox = document.getElementById("box");
92 var aBox = oBox.getElementsByTagName("li");
93 var aBtn = document.getElementById("btn").getElementsByTagName("li");
94 var oPrev = document.getElementById("prev");
95 var oNext = document.getElementById("next");
96 var iNow = 0;
97 var timer = null;
98
99 oBox.innerHTML += oBox.innerHTML;
100 oBox.style.width = aBox[0].offsetWidth * aBox.length + "px";
101 oBox.style.width = aBox[0].offsetWidth*aBox.length +"px";
102
103 //红色按钮的样式
104 function tab(){
105 for(var i=0;i<aBtn.length;i++){
106 aBtn[i].className = "";
107 }
108 move(oBox,{left:-aBox[0].offsetWidth*iNow});
109 aBtn[iNow].className = "active";
110 }
111 //下一张（神逻辑在此，擦汗！！希望访客给出更好建议）
112 function next(){
113 if(iNow==aBox.length/2){
114 oBox.style.left = 0;
115 iNow = 0;
116 }
117 for(var i=0;i<aBtn.length;i++){
118 aBtn[i].className = "";
119 }
120 iNow++;
121 var iNew = iNow;
122 if(iNew == aBtn.length) iNew = 0;
123 aBtn[iNew].className = "active";
124 move(oBox,{left:-aBox[0].offsetWidth*iNow});
125 }
126
127 //红色圆钮得点击效果
128 for(var i=0;i<aBtn.length;i++){
129 aBtn[i].index = i;
130 aBtn[i].onclick = function(){
131 iNow = this.index;
132 tab();
133 }
134 }
135 //上一张（与“上一张”一样的神逻辑！！）
136 oPrev.onclick = function(){
137 if(iNow<=aBox.length/2 - 1){
138 iNow+=5;
139 oBox.style.left = -aBox[0].offsetWidth*iNow + "px";
140 }
141 for(var i=0;i<aBtn.length;i++){
142 aBtn[i].className = "";
143 }
144 iNow--;
145 var iNew = iNow-5;
146 if(iNew == -1) iNew = aBtn.length-1;
147 aBtn[iNew].className = "active";
148 move(oBox,{left:-aBox[0].offsetWidth*iNow});
149 }
150 oNext.onclick = next;
151 clearInterval(timer);
152 timer = setInterval(next,2000);
153 oWrap.onmouseout = function(){
154 timer = setInterval(next,2000);
155 }
156 oWrap.onmouseover = function(){
157 clearInterval(timer);
158 }
159 }
160 </script>
时间： 2024-10-24 22:40:27