O exemplo deste artigo usa o JS para obter rolagem de imagem com efeito de pausa, controlado por botões, para sua referência. O conteúdo específico é o seguinte
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> rolagem sem costura 2 </title> <style> #warp {width: 1250px; Altura: 300px; estouro: oculto; margem: 100px automático 0; Overflow-X: Auto; } #warp #con {width: 4000px; Altura: 300px; estouro: oculto; } #warp #con #box1 {float: esquerda; estouro: oculto; } #warp #con #box2 {float: esquerda; estouro: oculto; } #warp img {float: esquerda; Margem-direita: 10px; Largura: 200px; Altura: 300px; } .btn {text-align: Center; Margin-top: 10px; } .btn Button {font-size: 16px; } </style> </ad Head> <body> <div id = "Warp"> <div id = "con"> <div id = "box1"> <img src = "imagens/meinv1.jpg"> <img src = "imagens/meinv2.jpg"> <iMg src = "imagens/meinv3.jpg"> <img src="images/meinv5.jpg"> <img src="images/meinv6.jpg"> </div> <div id="box2"></div> </div> </div> <div> <button id="scrollL"><<scroll left</button> <button id="scrollR">Scroll right>></button> </div> <script> var 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 = nulo, timer2 = nulo, flage = 1; box2.innerhtml = box1.innerhtml; max = box1.clientWidth; imgmax = img.clientWidth+10; função scrollLeft () {sinalizador = 1; ClearInterval (Timer1); Timer1 = setInterval (function () {Warp.ScrollLeft ++; if (Warp.ScrollLeft> = max) {Warp.ScrollLeft = 0;} if (Warp.ScrollLeft%imgmax == 0) {ClearInterval (timer1); cleartimeout (timer2); timer2; timer1 = setInterval (scrollLeft, 5)}, 2000)}}, 5)} função scrollright () {flag = 0; ClearInterval (Timer1); Timer1 = setInterval (function () {Warp.ScrollLeft--; if (Warp.ScrollLeft <= 0) {Warp.ScrollLeft = max;} if (Warp.ScrollLeft%imgmax == 0) {ClearInterval (Timer1); ClearTimeout (timer2); timer1 = setInterval (scrollright, 5)}, 2000)}}, 5)} scrollLeft (); scrolll.OnClick = function () {// clearInterval (timer1); // ClearTimeout (Timer2); rollleft (); } 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>O efeito específico desse efeito é mover o mouse para cima e rolar e depois rolar para fora. Ao rolar, é a rolagem de fotos uma a uma, ou seja, depois de rolar uma imagem por 2 segundos, pare e comece a rolar a próxima foto. Consulte o código para o conteúdo específico.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.