本文實例為大家介紹了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實現無縫滾動還是正常實現了,希望對大家也能有所幫助。
新聞熱點
疑難解答