Примеры в этой статье делятся кодом для реализации бесшовного эффекта прокрутки JS для вашей ссылки. Конкретный контент заключается в следующем
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Seamless Scroll </title> <style> #warp {width: 1200px; Высота: 300px; переполнение: скрыто; Маржа: 100px Auto 0; } #warp #con {width: 4000px; Высота: 300px; переполнение: скрыто; } #warp #con #box1 {float: left; переполнение: скрыто; } #warp #con #box2 {float: left; переполнение: скрыто; } #warp img {float: left; Ширина: 200px; Высота: 300px; } </style> </head> <body> <div id = "warp"> <div id = "con"> <div id = "box1"> <img src = "images/meinv1.jpg"> <img src = "Images/meinv2.jpg"> <img src = "Images/meinv3.jpg"> <img src ". <img src = "Images/meinv5.jpg"> <img src = "Images/meinv6.jpg"> </div> <div id = "box2"> </div> </div> </div> <script> varp = document.getelementbyid ('warp'); var con = document.getElementbyId ('con'); var box1 = document.getElementbyId ('box1'); var box2 = document.getElementbyId ('box2'); // box2.innerhtml = box1.innerhtml; var Timer1 = null, x = 0; функция scroll () {// function 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>Основная идея этого эффекта состоит в том, что ширина содержания части изображения должна быть намного больше, чем ширина области, которая будет отображаться, чтобы появиться стержень прокрутки. Скопируйте содержание предыдущей группы изображений, чтобы сделать его беспроблемной прокруткой. Пожалуйста, обратитесь к коду для деталей.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.