本文實例為大家介紹了js實現無縫滾動特效需要做到的功能,以及關鍵性js代碼,分享給大家供大家參考,具體內容如下
運行效果圖:

結合下學了的知識,做個模擬的綜合性擴展練習~~ 大致功能如下:
具體代碼:
window.onload = function(){  //聲明部分( 現在的習慣是要寫什么聲明什么, 一起寫容易搞忘了。。也不知道好不好這樣)  var oDiv = document.getElementById('box');  var oUl = oDiv.getElementsByTagName('ul');  var oLi = oUl.getElementsByTagName('li');  var speed = 2;  var timer = null;     //讓ul的內容增一倍,從而實現無縫滾動  oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;  oUl.style.width = oLi[1].offsetWidth * oLi.length + 'px';  //move函數  function move(){    oUl.style.left = oUl.offsetLeft + speed + 'px';    //控制左    if(oUl.offsetLeft < -oUl.offsetWidth/2){    oUl.style.left = 0;    }    //控制右    if(oUl.offsetLeft > 0){    oUl.style.left = -oUl.offsetWidth/2 + 'px';    }  }    //圖標點擊~ 控制移動方向    var oLeft = document.getElementById('jt_left');    var oRight= document.getElementById('jt_right');    oLeft.onclick = function(){    speed = -2;    }    oRight.onclick = function(){    speed = 2;    }    //鼠標移入移出效果    oDiv.onmouseover = function(){      clearInterval(timer);    }    oDiv.onmouseout = function(){      timer = setInterval(move,20);    }    timer = setInterval(move,20);     //點擊獲取大圖        var aA = oDiv.getElementsByTagName('a');    for(var i=0;i<aA.length;i++){      aA[i].onclick = function(){        showPic(this);        return false;      }    }        function showPic(whichpic){      var source = whichpic.href;      var placeholder = document.getElementById('placeholder');      placeholder.src = source;    }}最后文字的替換效果 ,本想用圖片的方式,讓文本框對應的數字跟著變~~ 結果未能成功,不知原因,這方面還需待提高,希望大家能提供一些好的建議,不過js實現無縫滾動還是正常實現了,希望對大家也能有所幫助。
新聞熱點
疑難解答