首页 > 代码库 > 带无缝滚动的轮播图（含JS运动框架）

带无缝滚动的轮播图（含JS运动框架）

2024-08-28 05:15:57   221人阅读

今天学习了一下轮播图的写作，想到前一阵学过的无缝滚动得思想，所以就把轮播与滚动结合了一下。不过我的代码的神逻辑我自己都不敢恭维，在没网没参照的情况下，只能硬着头皮往下写，希望跟大家共勉吧。

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>

 

带无缝滚动的轮播图（含JS运动框架）


联系
我们