思路只要是ul移动前,首先将当前显示的li克隆岛ul最后,当每次运动执行完毕后,再将前面的li删除,如此循环。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> </head> <style type="text/css"> .wrap{ 320px; height:50px; overflow: hidden; margin:0 auto; margin-top:50px; position: relative; border:1px solid #333; } .wrap ul{ position: absolute; overflow: hidden; padding:0px; margin:0; /*这个属性很重要,moveStart需要获取到*/ left:0px; } .wrap ul li{ 100px; height:50px; float: left; line-height: 50px; text-align:center; background:orange; font-size: 16px; margin-right: 10px; color:#fff; list-style-type: none; } </style> <body> <input type="button" value ="我要切" id="tab"> <div class="wrap" id="wrap"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> </html> <script type="text/javascript" src="startMove.js"></script>
js
<script type="text/javascript"> window.onload = function(){ var iNum = 3; var oBtn = document.getElementById('tab'); var timer; var wrap = document.getElementById('wrap'); var oUl = wrap.getElementsByTagName('ul')[0]; var b = true; var aLi = oUl.getElementsByTagName('li'); //获取每个单位的宽度包括li的宽度和margin var oSize = parseInt(getStyle(aLi[0],'marginRight')) + parseInt(getStyle(aLi[0],'width')); //设置ul的宽度 function getWidth(){ oUl.style.width = aLi.length * oSize +'px'; } getWidth(); //移动函数 function slider(){ //防止连续点击切换bug if(b){ //在运动函数没有结束之前,b为false,点击无效 b=false; for (i = 0; i< iNum ;i++){ //复制iNum个li var oLi = aLi[i].cloneNode(true); //移动到ul最后 oUl.appendChild(oLi); //重新设置宽度 getWidth(); } //运动函数startMove(obj,json,fn) startMove( //当前对象 oUl, //移动距离 {left : -iNum * oSize}, //回调 function(){ for( i = 0; i< iNum ; i++){ //移除第一个li oUl.removeChild(aLi[0]); //设置ul的left为0 oUl.style.left = 0 +'px'; } //运动结束,b为true,可以继续下一次点击 b=true; } ); } }; //触发 oBtn.onclick = function(){ if(t){ clearInterval(t); } slider(); }; //自动播放 function autoPlay(t){ timer = setInterval(slider,t); } autoPlay(3000) }; </script>
startMove.js
function startMove(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function() { var bStop = true; for (attr in json) { var icur = 0; icur = (attr == 'opacity') ? Math.round(getStyle(obj, attr) * 100) : parseInt(getStyle(obj, attr)); var iSpeed = (json[attr] - icur) / 8; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if (icur != json[attr]) { bStop = false; } if (attr == 'opacity') { obj.style.filter = 'alpha(opacity:' + (icur + iSpeed) + ')'; obj.style.opacity = (icur + iSpeed) / 100; } else { obj.style[attr] = icur + iSpeed + 'px'; } } if (bStop) { clearInterval(obj.timer); if (fn) { fn(); } } }, 30); } function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } }