Cet exemple partage la mise en œuvre du code JavaScript en effet de défilement transparent pour votre référence. Le contenu spécifique est le suivant]
Image de reproduction:
Code d'implémentation:
<! Doctype html> <html> <éad- head> <meta charset = "gb2312" /> <ititle> zzzz </title> <style> * {margin: 0; rembourrage: 0; } corps {largeur: 1000px; marge: 100px auto; Color d'arrière-plan: #FFF; } #wrapper {Overflow: Hidden; Largeur: 600px; hauteur: 100px; Position: relative; } #wrapper ul {position: absolue; à gauche: 0; en haut: 0; } #wrapper li {float: gauche; Style de liste: aucun; } #wrapper li img {width: 150px; hauteur: 100px; Border-Radius: 9px; } entrée [type = bouton] {margin-top: 20px; Largeur: 35px; hauteur: 25px; hauteur de ligne: 25px; } </ style> <script type = "text / javascript"> window.onload = function () {var timer = null; Var Speed = 4; var od = document.getElementById ("wrapper"); var aU = od.getElementsByTagName ('ul') [0]; var ali = aU.getElementsByTagName ('li'); au.innerhtml = au.innerhtml + au.innerhtml; au.style.width = ali [0] .offsetWidth * ali.length + 'px'; Timer = setInterval (move, 30) function move () {if (aU.offsetleft <-aU.offsetWidth / 2) {Au.Style.left = '0'; } if (au.offsetleft> 0) {au.style.left = -au.offsetWidth / 2 + 'px'; } au.style.left = au.offsetleft + speed + 'px'; } od.onmouseOver = function () {ClearInterval (Timer); } od.onmouseout = function () {timer = setInterval (move, 30)} document.getElementById ("btn1"). onClick = function () {Speed = -4; } document.getElementById ("btn2"). onClick = function () {Speed = 4; }} </ script> </ head> <body> <div id = "wrapper"> <ul> <li> <img src = "img / pic4.jpg" /> </li> <li> <img src = "img / pic3.jpg" /> </ li> <li> <img src = "img / pic2 src = "img / pic2.jpg" /> </ li> <li> <img src = "img / pic1.jpg" /> </li> </ul> </ div> <entrée type = "Button" name = "" id = "btn1" value = "Left" /> <intry type = "Button" id = "btn2" value = "droite" /> </ body>Vous pouvez vous référer aux sujets d'étude suivants:
"Résumé de l'effet de défilement JavaScript", "Résumé de l'effet de défilement jQuery", "Résumé de l'effet du carrousel d'image Javascript"
Ce qui précède concerne cet article, et j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.