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{

        width: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{

		width: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];

	}

}

秒客网

javascript 多图无缝切换

相关文章