принцип:
1. Дайте UL абсолютное положение, чтобы сделать его отдельным от потока документов, установив влево на 0, наведите изображение в UL, напишите функцию «двигаться», функция функции может сделать левый прогон UL вправо с положительной скоростью,
2. Установите таймер, чтобы функция «двигаться» выполняется каждые 30 миллисекунд (параметры переменной)
3. Поскольку длина UL будет «запустить», содержание UL, то есть IMG, может быть удвоится.
oul.innerhtml += oul.innerhtml;
4. В настоящее время, поскольку содержание UL увеличивается, его ширина также увеличится, а количество отображаемых изображений может измениться или быть неопределенным в соответствии с фактическим проектом.
oul.style.width = oli.length*oli [0] .offsetwidth+'px';
5. Добавьте код в функцию «Перемещение».
5.1 В это время UL движется вправо. Когда ul offsetleft> 0, вытяните UL влево «половина ширины UL», то есть позвольте UL двигаться вправо без лимита.
if (oul.offsetleft> 0) {oul.style.left = -oul.offsetWidth/2+'px';}5.2 Когда UL перемещается влево, а его Offsetleft запускает половину ширины UL, вытяните весь UL обратно в начальный левый: 0;
if (oul.offsetleft <-oul.offsetwidth/2) {oul.style.left = 0; }На коде:
HTML:
<div id = "box"> <ul> <li> <a href = "#"> <img src = "1.jpg"/> </a> </li> <li> <a href = "#"> <img src = "2.jpg"/> </a> </li> <li> <a href = "#"> <img src = "2. /> </a> </li> <li> <a href = "#"> <img src = "3.jpg"/> </a> </li> <li> <a href = "#"> <img src = "4.jpg"/> </a> </li> </ul> </div>
CSS:
* {margin: 0; Padding: 0;}#box {width: 480px; Высота: 110px; Граница: 1px красное твердое вещество; Маржа: 100px Auto; переполнение: скрыто; позиция: относительно; } #box ul {position: Absolute; слева: 0; Top: 5px;}#box ul li {list-style: none; Плавание: осталось; Ширина: 100px; высота: 100px; Лебь набивки: 16px; } #box ul li img {width: 100px; Высота: 100px;}JS:
<script> window.onload = function () {var Odiv = document.getElementById ('div1'); var oul = Odiv.getElementsBytagname ('ul') [0]; var oli = oul.getElementsbytagname ('li'); var aa = document.getelementsbytagname ('a'); // Пусть UL имеет скорость перемещения OUL.INNERHTML += OUL.INNERHTML; oul.style.width = oli.length*oli [0] .offsetwidth+'px'; aa [0] .onclick = function () {ispeed = -10;}; aa [1] .onclick = function () {ispeed = 10;}; function fnmove () {if (oul.offsetleft <- if (oul.offsetleft> 0) {oul.style.left = -oul.offsetWidth/2+'px'; } oul.style.left = oul.offsetleft+ispeed+'px'; // весь UL движется вправо}; var timer = null; clearInterval (timer); timer = setInterval (fnmove, 30); oul.onmouseover = function () {clearInterval (timer);}; oul.onmouseout = function () {timer = setInterval (fnmove, 30); // выполнить этот таймер, когда мышь отодвинут};}; </script>Выше приведено в редакторе и идеи беспрепятственной прокрутки и кода, основанные на бесшовном прокрутке и код. Надеюсь, это может вам помочь. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение. Редактор ответит вам вовремя. Большое спасибо за вашу поддержку веб -сайта Wulin Network!