Contoh dalam artikel ini menggunakan JS untuk mencapai pengguliran gambar dengan efek jeda, dikendalikan oleh tombol, untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> gulir mulus 2 </iteme> <tyle> #warp {width: 1250px; Tinggi: 300px; meluap: tersembunyi; Margin: 100px Auto 0; overflow-x: otomatis; } #warp #con {width: 4000px; Tinggi: 300px; meluap: tersembunyi; } #warp #con #box1 {float: left; meluap: tersembunyi; } #warp #con #box2 {float: left; meluap: tersembunyi; } #warp img {float: left; margin-kanan: 10px; Lebar: 200px; Tinggi: 300px; } .btn {text-align: center; margin-top: 10px; } .btn tombol {font-size: 16px; } </tyle> </head> <body> <Div id = "warp"> <div id = "con"> <div id = "box1"> <img src = "gambar/meinv1.jpg"> <img src = "gambar/meinv2.jpg"> <img src = "MeINV3.JP" MINV2.JPG "> <img src =" MeINV3.jpg "> <img src = "gambar/meinv5.jpg"> <img src = "gambar/meinv6.jpg"> </div> <div id = "box2"> </div> </div> </div> <vect id = "scrolll"> << scroll kiri </tombol> </Div> <Div> script = scrollr "> << scroll kiri </Tombol </Tombol </Div> <Div> scriprolls = scrollr"> << scroll kiri </Tombol </Tombol </divrect = "scripr" scrollr "> << scroll kiri </Tombol </Tombol </divrect =" script = scrollr " warp = document.getElementById ('warp'); var con = document.geteLementById ('con'); var box1 = document.geteLementById ('box1'); var box2 = document.geteLementById ('box2'); var img = box1.getElementsbyTagname ('img') [0]; var scrolll = document.geteLementById ('scrolll'); var scrollr = document.geteLementById ('scrollr'); var timer1 = null, timer2 = null, flage = 1; box2.innerhtml = box1.innerhtml; max = box1.clientwidth; imgmax = img.clientwidth+10; function scrollft () {flag = 1; ClearInterval (Timer1); Timer1 = setInterval (function () {warp.scrollleft ++; if (warp.scrollleft> = max) {warp.scrollleft = 0;} if (warp.scrollft%imgmax == 0) {clearInterval (timer1); cleartimeout (timer2); timer1 = setInterval (scrollleft, 5)}, 2000)}}, 5)} function scrollright () {flag = 0; ClearInterval (Timer1); timer1 = setInterval (function () {warp.scrollleft--; if (warp.scrollleft <= 0) {warp.scrollleft = max;} if (warp.scrollft%imgmax == 0) {clearInterval (timer1); cleartimeout (timer2); timer1 = setInterval (scrollright, 5)}, 2000)}}, 5)} scrollleft (); scrolll.onClick = function () {// clearInterval (timer1); // clearTimeout (timer2); scrollleft (); } scrollr.onClick = function () {// clearInterval (timer1); // clearTimeout (timer2); scrollright (); } warp.onmouseEnter = function () {clearInterval (timer1); ClearTimeout (Timer2); } warp.onmouseleave = function () {clearInterval (timer1); ClearTimeout (Timer2); Console.log (Flage); if (flage) {scrollleft ();} else {scrollright ();}} </script> </body> </html>Efek spesifik dari efek ini adalah untuk menggerakkan mouse dan gulir, dan kemudian menggulir keluar. Saat menggulir, itu adalah pengguliran gambar satu per satu, yaitu, setelah menggulir satu gambar selama 2 detik, berhenti dan mulai menggulir gambar berikutnya. Silakan merujuk ke kode untuk konten tertentu.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.