Любая веб -страница, которую вы откроете, в основном увидит бесшовные изображения прокрутки или карусели, такие как Taobao и 360 Office Home страница на домашних страницах
Наблюдая за этими изображениями каруселей, вы можете обнаружить, что изображения можно переключаться вперед и назад, так как вы это делаете?
Есть два основных способа достижения карусели или бесшовной прокрутки. Одним из них является отображение или скрыть изображение, изменив свет и темноту изображения, то есть прозрачные изображения, а другая - отобразить изображение в видимой области через движущуюся рамку. Оба метода будут использовать одно и то же, то есть таймер.
В JavaScript есть два типа таймеров, 1.setInterval (); 2.setTimeOut (); Есть также два метода закрытия таймеров, ClearInterval () и ClearTimeOut (). Разница между двумя таймерами заключается в том, что первое может быть выполнено несколько раз, в то время как последний может быть выполнен только один раз.
На этот раз я расскажу только о бесшовной прокрутке, а в следующей статье представлена картина каруселей.
Код для реализации простой бесшовной прокрутки выглядит следующим образом:
/*Полный код* /<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8" /> <style> div {позиция: относительно; ширина: 630px; высота: 220px; граница: твердый 2px Black; переполнение: hidden;} ul {position: Absolute; Top: 10px; слева: 0;} img {width: 200px; высота: 200px; float: слева; правая маржи: 10px; граница: 2px sold желтый;} li {list-style: none; margin: 0; padding: 0;} ul {margin: 0; padding: 0;} </style> <script> window.onload = function () {var oul = document.getElementbyid ("main"); var ali = oul.getElementsbytagname ("img"); oinput = document.getElementsbytagname ("input") [0]; oul.innerhtml+= oul.innerhtml; oul.style.width = ali.length*ali [0] .offsetWidth+"px"; var timer = null; setInterval (function () {oul.style.left = oul.offsetleft-8+"px"; if (oul.offsetleft <-oul.offsetWidth/2) {oul.style.left = "0px";}}, 30);}; </script> </hade> <viod> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <viod id = "main"> <li> <img src = "../ img/1.jpg"> </li> <li> <img src = "../ img/2.jpg"> </li> <li> <img src = "../ img/2.jpg"> </li> <li> <img src = "../ img/3.jpg"> </li> <li> <img src = "../ img/3.jpg"> </li> <li> <img src = " src = "../ img/3.jpg"> </li> <li> <img src = "../ img/4.jpg"> </li> <li> <img src = "../ img/9.jpg"> </li> </ul> </div> </div> </body> </html>/-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------/
Бесплатная схема прокрутки относительно проста. Следующее в основном объясняет содержание JS:
Сначала получите UL и LI соответственно, затем скопируйте контент в UL, динамически изменяйте ширину UL через JS (если вы хотите плавно прокручивать вверх и вниз, изменить его ширину) и, наконец, включите таймер. В коде UL перемещается на 8 пикселей влево каждые 30 микросекунд, а когда видимый левый поля UL составляет менее половины общей длины UL, он становится 0. Поскольку компьютер работает очень быстро, это изменение почти невозможно почувствовать. Все, что мы видим, это картина, постоянно движущаяся влево, бесконечное движение.
Выше приведено бесшовный код прокрутки JS, представленный вам редактором. Я надеюсь, что это будет полезно для всех!