?

昨天閑來沒事 看了下圖片效果? 發(fā)現(xiàn)這個方法j 就自己模仿下 上代碼? 當(dāng)中有很多的紕漏 請大神們多多指教一二？

<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; //點擊按鈕走動的數(shù)量var aBut=true;oLeft.onclick=function(){ //左側(cè)點擊if(aBut){aBut = false;for(var i=0;i<oNum;i++){var aLi=oLi[i].cloneNode(true);//添加lioUll.appendChild(aLi); //復(fù)制li到ul里 Ulwidth();}startMove(oUll,(- oNum * oSize),function(){ //startMove是調(diào)用框for(var i=0;i<oNum;i++){oUll.removeChild(oLi[0]); //移除復(fù)制oUll.style.left = 0;}aBut=true;})}}oRight.onclick=function(){ //右側(cè)點擊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];}} move.js

?

<script src="move.js" type="text/javascript"></script> 注意這調(diào)用的運動框架 框架是復(fù)制過來的 <title>無標(biāo)題文檔</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>

?

雖然當(dāng)中有很多不理解，但是希望自己一點一滴的進步，一定要克服懶惰啊，學(xué)一點就離成功近一步，雄起吧！！！

?

轉(zhuǎn)載于:https://www.cnblogs.com/ninali/p/3156156.html

總結(jié)

以上是生活随笔為你收集整理的js基础练习---图片无缝左右滚动效果（主要以复制删除为主）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。