Heim > Artikel > Web-Frontend > js, um nahtlose Bildlaufeffekte zu erzielen_Javascript-Fähigkeiten
Das Beispiel in diesem Artikel stellt die Funktionen vor, die js benötigt, um nahtlose Scrolleffekte zu erzielen, sowie den wichtigsten js-Code und teilt ihn als Referenz mit Ihnen. Der spezifische Inhalt ist wie folgt:
Operationsrendering:
Erstellen Sie in Kombination mit den unten erlernten Kenntnissen eine simulierte umfassende erweiterte Übung~~ Die allgemeine Funktion ist wie folgt:
Spezifischer Code:
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; } }
Für den endgültigen Textersetzungseffekt wollte ich die Zahlen, die dem Textfeld entsprechen, ändern~~ Dieser Aspekt muss noch verbessert werden Geben Sie einige gute Vorschläge. Ich hoffe jedoch, dass das nahtlose Scrollen in js für alle hilfreich sein kann.