javascript多図シームレス切り替え

5203 ワード
考えは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>
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];
	}
}
　　
レンダリング