Heim > Artikel > Web-Frontend > Von JS implementierter Bildlaufleisteneffekt (Beispielcode)
In diesem Artikel wird hauptsächlich die Methode von JavaScript zum Erzielen des Bildlaufleisteneffekts vorgestellt, wobei Techniken im Zusammenhang mit der JavaScript-Bearbeitung von HTML-Elementen zum Erzielen des Bildlaufs verwendet werden. Freunde, die dies benötigen, können sich darauf beziehen it
Das Beispiel in diesem Artikel beschreibt, wie Sie mit JavaScript den Bildlaufleisteneffekt erzielen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } #p1 ul{ position: absolute; left: 0px; top: 0px; } #p1 ul li img { width: 187px; height: 125px; } #p1 ul li{ float: left; width: 187px; height: 125px; list-style: none; } #p1{ width: 748px; height: 125px; position: relative; background-color: chartreuse; overflow: hidden; float: left; } #body{ width: 948px; height: 125px; margin: 100px auto; } #body #leftp{ float: left; width: 100px; height: 100px; } #body #rightp{ float: left; width: 100px; height: 100px; } #body #leftp button{ background-image: url("image/left.PNG"); width: 100px; height: 100px; } #body #leftp button img{ width: 100px; height: 100px; } #body #rightp button img{ width: 100px; height: 100px; } </style> <script> window.onload=function(){ var op=document.getElementById('p1'); var oUl=op.getElementsByTagName('ul')[0]; var oLi=oUl.getElementsByTagName('li'); var oLeft=document.getElementById('leftp'); var oright=document.getElementById('rightp'); oUl.innerHTML+=oUl.innerHTML; oUl.style.width=oLi[0].offsetWidth*oLi.length+'px'; var speed=-2; function move(){ if (oUl.offsetLeft<-oUl.offsetWidth/2){ oUl.style.left='0'; }else if(oUl.offsetLeft>0){ oUl.style.left=-oUl.offsetWidth/2+'px'; } oUl.style.left=oUl.offsetLeft+speed+'px'; }; var timer=setInterval(move,30); oLeft.onclick=function(){ speed=-2; }; oright.onclick= function () { speed=2; }; oUl.onmouseover=function(){ clearInterval(timer); }; oUl.onmouseout=function(){ timer=setInterval(move,30); }; } </script> </head> <body> <p id="body"> <p id="leftp"><button><img src="image/left.PNG"/></button></p> <p id="p1"> <ul> <li><img src="image/1.JPG"/></li> <li><img src="image/2.JPG"/></li> <li><img src="image/3.JPG"/></li> <li><img src="image/4.JPG"/></li> </ul> </p> <p id="rightp"><button><img src="image/right.PNG"/></button></p> </p> </body> </html>
Das obige ist der detaillierte Inhalt vonVon JS implementierter Bildlaufleisteneffekt (Beispielcode). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!