javascript 多图无缝切换

思路只要是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>

<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];
	}
}