Бесплатная прокрутка - это особый эффект, который часто используется в проектах. Есть также много образцов кодов в Интернете. Здесь я делюсь с вами относительно простым и практическим кодом с хорошей совместимостью. Пожалуйста, изучите это тщательно.
HTML -код:
Кода -копия выглядит следующим образом:
<</span> html>
<</span> head lang = "en">
<</span> meta charset = "utf-8">
<</span> заголовок> Бесполезное свиток </</span> title>
<</span> script src = "js/0010.js"> </</span> script>
<</span> Link rel = "styleSheet" type = "text/css" href = "css/0010.css"/>
</</Span> голова>
<</span> тело>
<</span> a href = "javascript:"> ходить влево </</span> a>
<</span> a href = "javascript:"> ходить вправо </</span> a>
<</span> div id = "div1">
<</span> ul>
<</span> li> <</span> img src = "Image/1.jpg"> </</span> li>
<</span> li> <</span> img src = "image/2.jpg"> </</span> li>
<</span> li> <</span> img src = "image/3.jpg"> </</span> li>
<</span> li> <</span> img src = "image/4.jpg"> </</span> li>
</</Span> ul>
</</Span> div>
</</Span> тело>
</</Span> html>
CSS -код
Кода -копия выглядит следующим образом:
*{
поля: 0;
Заполнение: 0;
}
#div1 {
переполнение: скрыто;
Фон: синий;
позиция: относительно;
Ширина: 600px;
Высота: 150px;
Маржа: 100px Auto;
}
#div1 ul {
позиция: абсолютно;
слева: 0px;
Верх: 0px;
Список стиля: нет;
}
#div1 ul li {
Плавание: осталось;
}
#div1 ul li img {
Ширина: 150px;
Высота: 150px;
}
JS: код
Кода -копия выглядит следующим образом:
window.onload = function () {
var Odiv = document.getElementById ('div1');
var oul = odiv.getElementsbytagname ('ul') [0];
var ali = oul.getelementsbytagname ('li');
var timer = null;
var speed = 2; // управлять скоростью и направлением прокрутки
oul.innerhtml = oul.innerhtml+oul.innerhtml;
oul.style.width = ali [0] .offsetwidth*ali.length+'px';
timer = setInterval (ход, 30);
Odiv.onmouseover = function () {// мышь в предварительной
ClearInterval (таймер);
};
Odiv.onmouseout = function () {// Mouse Out и продолжить прокрутку
timer = setInterval (ход, 30);
}
document.getElementsbytagname ('a') [0] .onclick = function () {
скорость = -2;
}
document.getElementsbytagname ('a') [1] .onclick = function () {
скорость = 2;
}
Функция перемещения () {// Прокрутка изображений
if (oul.offsetleft <-oul.offsetwidth/2) {
oul.style.left = 0;
}
if (oul.offsetleft> 0) {
OUL.STYLE.LEFT = -OUL.OFFSETWIDTH/2+'PX';
}
oul.style.left = oul.offsetleft+speed+'px';
}
}
Разве эффект не очень хороший?