运动版的轮播图，有左右按钮和单独分页
这个例子重点在于：
- 运动框架的复习，要灵活运动回调函数
- 始终以全局变量iNum来控制oUl的移动目的地，每次有任何动作，都是先判断iNum并改变iNum后去调用运动函数
- 刚才在复查代码的时候发现个奇怪的现象，在ie11和cent browser打开的时候居然不会滚动，iNum倒是在变化，突然想到之前在看妙味课堂的时候有老师提到一句，给要运动的元素，在加上
position:absolute后，如果不加上left:0;top:0会有兼容问题，所以，我给oUl加上了left:0;top:0;就解决了问题。
<style>ul,h2,p{padding: 0;margin: 0;list-style: none;}#wrap{width: 600px;height: 450px;border: 1px solid black;margin: 100px auto;position: relative;overflow: hidden;}img{width: 600px;height: 450px;}ul{overflow: hidden;position: absolute;}#list{width: 3600px;left: 0;top: 0;}li{float: left;}span{position: absolute;width: 40px;height: 40px;font-weight: bold;font-size: 34px;line-height: 40px;opacity: 0.6;text-align: center;top: 50%;margin-top: -20px;background: white;z-index: 1;}#left{left: 0;}#right{right: 0;}span:hover{cursor: pointer;background: orangered;}#btns{bottom: 10px;right: 10px;}#btns li{width: 15px;height: 15px;background: orange;margin: 4px;cursor: pointer;}#btns li.active{background: orangered;}</style><script type="text/javascript">window.onload = function(){var oUl = document.getElementById(‘list‘);var aLi = oUl.getElementsByTagName(‘li‘);var aSpan = document.getElementsByTagName(‘span‘);var oBtn = document.getElementById(‘btns‘);var aBtn = oBtn.getElementsByTagName(‘li‘);var aImg = document.getElementsByTagName(‘img‘);var timerAuto = null;var iNum = 0;var newTarget = 0;var w = aImg[0].offsetWidth;function getStyle(obj,attr){return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];}function doMove(obj,attr,dir,target,endFn){dir=parseInt(getStyle(obj,attr))<target?dir:-dir;clearInterval(obj.timer);obj.timer=setInterval(function(){var speed=parseInt(getStyle(obj,attr))+dir;if(speed>target&&dir>0 || speed<target&&dir<0){speed=target;}obj.style[attr]=speed+‘px‘;if(speed==target){clearInterval(obj.timer);endFn&&endFn();}},30);}function changeColor(index){for (var i=0; i<aBtn.length; i++) {aBtn[i].className = ‘‘;}aBtn[index].className = ‘active‘;}function moveAuto(){clearInterval(timerAuto);timerAuto = setInterval(function(){if(iNum!=aLi.length-1){iNum++;doMove(oUl,‘left‘,30,-iNum*w);}else{iNum = 0;clearInterval(timerAuto);doMove(oUl,‘left‘,150,-iNum*w,moveAuto);}changeColor(iNum);},1500);}moveAuto();for (var i=0; i<aSpan.length; i++) {aSpan[i].index = i;aSpan[i].onclick = function(){clearInterval(timerAuto);if(this.index == 0){if(iNum == aLi.length - 1){iNum = 0;doMove(oUl,‘left‘,150,-(w*iNum),moveAuto);}else{iNum++;doMove(oUl,‘left‘,40,-(w*iNum),moveAuto);}}else{if(iNum == 0){iNum = aLi.length - 1;doMove(oUl,‘left‘,150,-(w*iNum),moveAuto);}else{iNum--;doMove(oUl,‘left‘,40,-(w*iNum),moveAuto);}}changeColor(iNum);};}for (var i=0; i<aBtn.length; i++) {aBtn[i].index = i;aBtn[i].onmouseover = function(){changeColor(this.index);clearInterval(timerAuto);iNum = this.index;doMove(oUl,‘left‘,150,-(w*iNum));};aBtn[i].onmouseout = function(){moveAuto();};}};</script></head><body><div id="wrap"><span id="left"><</span><span id="right">></span><ul id="list"><li><img src="img/1.jpg"></li><li><img src="img/2.jpg"></li><li><img src="img/3.jpg"></li><li><img src="img/4.jpg"></li><li><img src="img/5.jpg"></li><li><img src="img/6.jpg"></li></ul><ul id="btns"><li class="active"></li><li></li><li></li><li></li><li></li><li></li></ul></div></body>
时间： 2024-10-20 15:42:47