用原生js实现无缝轮播

来源：互联网发布：淘宝双11营业额编辑：程序博客网时间：2024/05/18 23:12

这里引入了自己封装的一个简易运动框架这个运动框架网上很常见；

这里提供js代码以供参考：

<script src="js/运动框架.js"></script><script>window.onload = function() {var tp = document.getElementById("tp");var lis = document.getElementById("an").getElementsByTagName('li');var lbtn = document.getElementById("lbtn");var rbtn = document.getElementById("rbtn");var lf = document.getElementById("lf");var rt = document.getElementById("rt");var bx = document.getElementById("bx");var timer;var x = 1;function zouni() {if(x == 6) {x = 2;tp.style.left = -520 + 'px';}for(var i = 0; i < lis.length; i++) {lis[i].style.background = '';}starmove(tp, {'left': -520 * x});if(x == 5) {lis[0].style.background = '#EF8C23';} else {lis[x - 1].style.background = '#EF8C23';}}clearInterval(timer);function go() {x++;zouni();}timer = setInterval(go, 2000)bx.onmouseover = function() {clearInterval(timer);}bx.onmouseout = function() {timer = setInterval(go, 2000);}for(var i = 0; i < lis.length; i++) {lis[i].xvhao = i;lis[i].onclick = function() {x = this.xvhao + 1;zouni();}}lbtn.onclick = function() {x = x - 1;if(x == -1) {x = 3;tp.style.left = -520 * 4 + 'px';}for(var i = 0; i < lis.length; i++) {lis[i].style.background = '';}starmove(tp, {'left': -520 * x});if(x == 0) {lis[3].style.background = '#EF8C23';} else {lis[x - 1].style.background = '#EF8C23';}}rbtn.onclick = function() {x = x + 1;zouni();}lf.onmouseover = function() {starmove(lbtn, {'opacity': 50})}lf.onmouseout = function() {starmove(lbtn, {'opacity': 0})}rt.onmouseover = function() {starmove(rbtn, {'opacity': 50})}rt.onmouseout = function() {starmove(rbtn, {'opacity': 0})}}</script>

0 0