принцип:
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> </div>
CSS:
* {margin: 0; Padding: 0;} #box {ширина: 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'); var iSpeed = 10; // Пусть 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 <-oul.offsetWidth/2) {// Отрицательное число-это потому, что левая уль является отрицательным числом oul.style.left = 0; } else if (oul.offsetleft> 0) {oul.style.left = -oul.offsetWidth/2+'px'; } oul.style.left = oul.offsetleft+ispeed+'px'; // весь UL движется вправо}; var timer = null; ClearInterval (таймер); timer = setInterval (fnmove, 30); oul.onmouseover = function () {clearInterval (таймер); }; oul.onmouseout = function () {timer = setInterval (fnmove, 30); // выполнить этот таймер, когда мышь отодвинута}; }; </script>Если есть какие -либо ошибки, поправьте их.
Приведенный выше беспрепятственный простальный код реализации (рекомендуется) - это весь контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.