昨天闲来没事 看了下图片效果 发现这个方法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>
虽然当中有很多不理解,但是希望自己一点一滴的进步,一定要克服懒惰啊,学一点就离成功近一步,雄起吧!!!