js基础练习---图片无缝左右滚动效果（主要以复制删除为主）

 

昨天闲来没事 看了下图片效果  发现这个方法j 就自己模仿下 上代码  当中有很多的纰漏 请大神们多多指教一二？

<script type="text/javascript">
window.onload=function()
{
    var oLeft=document.getElementById("left")
    var oRight=document.getElementById("right")
    var oBox=document.getElementById("box");
    var oUll=document.getElementById("ull");    
    var oLi=oUll.getElementsByTagName("li")
    var oSize=oLi[0].offsetWidth + 16; //li的宽度
        function Ulwidth()
        {
            oUll.style.width=oLi.length * oSize + "px"; //整体ul的宽度等于li的长乘于li宽度
        }
        Ulwidth();
        
    var oNum=6; //点击按钮走动的数量
    var aBut=true;
    
    oLeft.onclick=function(){ //左侧点击

            if(aBut){
            aBut = false;
            
                for(var i=0;i<oNum;i++){
                var aLi=oLi[i].cloneNode(true);//添加li
                oUll.appendChild(aLi); //复制li到ul里
                Ulwidth();
                }
                
                startMove(oUll,(- oNum * oSize),function(){ //startMove是调用框
                
                    for(var i=0;i<oNum;i++){
                    oUll.removeChild(oLi[0]); //移除复制
                    oUll.style.left = 0;
                    }
                    
                    aBut=true;
                })
            }
            
        }
    
    oRight.onclick=function(){ //右侧点击

            if(aBut){
            aBut = false;
            
                for(var i=0;i<oNum;i++){
                var aLi=oLi[i].cloneNode(true);
                oUll.appendChild(aLi);
                Ulwidth();
                }
                
                startMove(oUll,( oNum * oSize),function(){
                
                    for(var i=0;i<oNum;i++){
                    oUll.removeChild(oLi[0]);
                    oUll.style.left = 0;
                    }
                    
                    aBut=true;
                })
            }
            
        }
        
        
}
</script>

 

move.js运动框架

function startMove(obj,json,endFn){
    
        clearInterval(obj.timer);
        
        obj.timer = setInterval(function(){
            
            var bBtn = true;
            
            for(var attr in json){
                
                var iCur = 0;
            
                if(attr == 'opacity'){
                    if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
                    iCur = Math.round(parseFloat(getStyle(obj,attr))*100);
                    
                    }
                    else{
                        iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
                    }    
                }
                else{
                    iCur = parseInt(getStyle(obj,attr)) || 0;
                }
                
                var iSpeed = (json[attr] - iCur)/8;
            iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if(iCur!=json[attr]){
                    bBtn = 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(bBtn){
                clearInterval(obj.timer);
                
                if(endFn){
                    endFn.call(obj);
                }
            }
            
        },30);
    
    }
    
    
    function getStyle(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }
        else{
            return getComputedStyle(obj,false)[attr];
        }
    }

 

<script src="move.js" type="text/javascript"></script> 注意这调用的运动框架 框架是复制过来的
<title>无标题文档</title>
<style type="text/css">
ul,li{padding:0px;margin:0px;}
#box{width:450px;margin:0 auto;position:relative;border:1px solid #ff0;height:70px;overflow:hidden;}
#ull{position:absolute;left:0;top:10px;list-style:none;}
#ull li{float:left;width:60px;height:50px;line-height:50px; background-color:#F00;text-align:center;color:#fff;margin-right:16px;}
</style>

 

<input type="button" value="左滚动" id="left" style="position:absolute;left:50%;top:100px;"/>
<input type="button" value="右滚动" id="right" style="position:absolute;left:60%;top:100px;"/>
<div id="box">
    <ul id="ull">
        <li><img src="../示例图片/示例图片/5.jpg"></li>
        <li>图片2</li>
        <li>图片3</li>
        <li>图片4</li>
        <li><img src="../示例图片/示例图片/6.jpg"></li>
        <li>图片6</li>
        <li>图片7</li>
        <li>图片8</li>
        <li>图片9</li>
        <li>图片0</li>
        <li><img src="../示例图片/示例图片/7.jpg"></li>
        <li>图片6</li>
        <li>图片7</li>
        <li>图片8</li>
        <li>图片9</li>
        <li>图片0</li>
        <li><img src="../示例图片/示例图片/7.jpg"></li>
    </ul>
</div>

 

虽然当中有很多不理解，但是希望自己一点一滴的进步，一定要克服懒惰啊，学一点就离成功近一步，雄起吧！！！