Contoh ini berbagi implementasi kode JavaScript efek gulir mulus untuk referensi Anda. Konten spesifiknya adalah sebagai berikut]
Gambar reproduksi:
Kode Implementasi:
<! Doctype html> <html> <head> <meta charset = "gb2312" /> <title> zzzz </iteme> <tyle> *{margin: 0; Padding: 0; } body {width: 1000px; Margin: 100px Auto; Latar Belakang-Color: #FFF; } #wrapper {overflow: tersembunyi; Lebar: 600px; Tinggi: 100px; Posisi: kerabat; } #wrapper ul {position: absolute; Kiri: 0; TOP: 0; } #wrapper li {float: left; List-style: tidak ada; } #wrapper li img {width: 150px; Tinggi: 100px; Border-Radius: 9px; } input [type = tombol] {margin-top: 20px; Lebar: 35px; Tinggi: 25px; Line-Height: 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 (pindahkan, 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+kecepatan+'px'; } od.onmouseOver = function () {clearInterval (timer); } od.onmouseout = function () {timer = setInterval (pindahkan, 30)} document.getElementById ("btn1"). onclick = function () {speed = -4; } document.getElementById ("btn2"). onclick = function () {speed = 4; }} </script> </head> <body> <v id = "wrapper"> <ul> <li> <img src = "img/pic4.jpg"/> </li> <li> <img src = "img/pic3.jpg"/> <li> <li> <li> <li> <iMg src = "Img/pic3.jpg"/> <li> <li> <li> <iMg src = "Img/pic3.jpg"/> </Li> <li> <li> <img src = "img/pic3.jpg"/> <li> <li> <li> <img src = "img/pic3.jpg"/> <li> <li> <li> <iMg src = "img/pic. src = "img/pic2.jpg"/> </li> <li> <img src = "img/pic1.jpg"/> </li> </ul> </div> <input type = "tombol" name = "" id = "btn1" value = "kiri"/<input type = "id =" btn2 value = "left"/<input type = "ID =" btn2 "Nilai"/"KIRI"/<input type = "ID" ID = "Anda dapat merujuk pada topik berikut untuk dipelajari:
"Ringkasan Efek Gulir Javascript", "JQuery Scrolling Effect Ringkasan", "JavaScript Ringkasan Efek Carousel JavaScript"
Di atas adalah semua tentang artikel ini, dan saya harap akan sangat membantu bagi semua orang untuk mempelajari pemrograman JavaScript.