Os exemplos deste artigo compartilham o código para implementar o efeito de rolagem sem costura JS para sua referência. O conteúdo específico é o seguinte
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> roll sem costura </title> <ylem> #warp {width: 1200px; Altura: 300px; estouro: oculto; margem: 100px automático 0; } #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; Largura: 200px; Altura: 300px; } </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 = "imagens/meinv5.jpg"> <img src = "imagens/meinv6.jpg"> </div> <div id = "box2"> </div> </div> </div> <cript> var warp = document.getElementById ('warp'); var con = document.getElementById ('con'); var box1 = document.getElementById ('Box1'); var box2 = document.getElementById ('box2'); // box2.innerhtml = box1.innerhtml; var timer1 = nulo, x = 0; função scroll () {// Scroll function box2.innerhtml = box1.innerhtml; timer1 = setInterval (function () {x ++; if (x> = box1.clientWidth) {x = 0; Warp.ScrollLeft = x;} Warp.ScrollLeft = x;}, 10)} scroll (); Warp.onMouseEnter = function () {ClearInterval (Timer1); } Warp.onMouseLeave = function () {scroll (); } </script> </body> </html>A idéia principal desse efeito é que a largura da parte do conteúdo da imagem deve ser muito maior que a largura da área a ser exibida, para que a barra de rolagem apareça. Copie o conteúdo do grupo anterior de imagens para torná -lo rolagem perfeita no efeito. Consulte o código para obter detalhes.
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.