带无缝滚动的轮播图（含JS运动框架）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了带无缝滚动的轮播图（含JS运动框架）相关的知识，希望对你有一定的参考价值。
今天学习了一下轮播图的写作，想到前一阵学过的无缝滚动得思想，所以就把轮播与滚动结合了一下。不过我的代码的神逻辑我自己都不敢恭维，在没网没参照的情况下，只能硬着头皮往下写，希望跟大家共勉吧。
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运动框架）的主要内容，如果未能解决你的问题，请参考以下文章