Эффект: переместите мышь в картинку и прекратите прокрутку, и мышь автоматически прокручивает
Может регулировать прокрутку влево или в правом направлении
Кода -копия выглядит следующим образом:
<стиль типа = "text/css">
* {
поля: 0;
Заполнение: 0;
}
#div1 {
переполнение: скрыто;
Ширина: 712px;
Высота: 108px;
Маржа: 100px Auto;
позиция: относительно;
Фон: красный;
}
#div1 ul {
позиция: абсолютно;
слева: 0;
Верх: 0;
}
#div1 ul li {
Плавание: осталось;
Ширина: 178px;
Высота: 108px;
Список стиля: нет;
}
</style>
Кода -копия выглядит следующим образом:
<тело>
<a href = "javaScript :;"> Прогуляйтесь влево </a>
<a href = "javaScript :;"> ходить вправо </a>
<div id = "div1">
<ul>
<li>
<img src = "Img/Seamless Scroll/1.jpg"/>
</li>
<li>
<img src = "Img/Seamless Scroll/2.jpg"/>
</li>
<li>
<img src = "Img/Seamless Scroll/3.jpg"/>
</li>
<li>
<img src = "Img/Seamless Scroll/4.jpg"/>
</li>
</ul>
</div>
</body>
Выше приведено простой макет, и следующее является основным кодом JavaScript
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
window.onload = function () {
var Odiv = document.getElementById ("div1");
var oul = odiv.getElementsbytagname ('ul') [0];
var ali = oul.getelementsbytagname ('li');
var speed = 2;
oul.innerhtml += oul.innerhtml;
oul.style.width = ali [0] .offsetwidth * ali.length + 'px';
Функция перемещения () {
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';
}
var Timer = setInterval (Move, 30);
Odiv.onmouseover = function () {
ClearInterval (таймер);
};
Odiv.onmouseout = function () {
timer = setInterval (ход, 30);
};
document.getElementsbytagname ('a') [0] .onclick = function () {
скорость = -2;
};
document.getElementsbytagname ('a') [1] .onclick = function () {
скорость = 2;
};
}
</script>
Позвольте мне кратко объяснить эту идею:
Во -первых, Set UL. В общей сложности есть 8 картинок.
Рассчитайте ширину UL до фактической ширины Li*8
Скрыть дополнительный контент позже
Примечание: Oul.offsetleft определенно отрицательный
Так что не упустите негативный знак при вынесении суждения
Кода -копия выглядит следующим образом:
if (oul.offsetleft <-oul.offsetwidth / 2) {
oul.style.left = '0';
}
Этот раздел означает, что изображение прокручивается на полпути и быстро вытягивает изображение назад. Поскольку программа выполняется слишком быстро, почти невозможно увидеть бесшовную прокрутку.
Наконец, используйте переменную скорость, чтобы управлять прокруткой в левом и правом направлениях.
Приведенный выше код реализует только самые основные функции, и друзья могут продолжать улучшать их на этой основе.