Эффект бесшовного прокрутки JS можно увидеть практически на любой веб -странице. Некоторые могут быть плагинами, но на самом деле, использование оригинального JavaScript относительно прост.
Главное, чтобы использовать знания о местоположении JS.
1.innerhtml: установить или получить HTML -тег элемента
2.scrollleft: установите или получите расстояние между левой границей объекта и самым левым концом в настоящее время видимого содержания в окне
3. OffsetWidth: установите или получите ширину указанной метки
4.setInterval (): установите метод для регулярного запуска
5.clearinterval (); Очистить таймер
Изображение воспроизведения:
Подкрасться: демонстрация
Кода -копия выглядит следующим образом:
<! Doctype html>
<html lang = "en">
<голова>
<meta charset = "utf-8">
<Title> Javascript Scroll Production </title>
</head>
<тело>
<style>
/*ряд*/
*{
поля: 0;
Заполнение: 0;
}
img {max-width: 100%;}
.контейнер{
максимальная ширина: 620px;
Поле: 0 Авто;
надоеволок: 50px;
}
.text-center {text-align: center;}
.list-inline li {
дисплей: встроенный блок;
}
.hide {display: none;}
ЧСС {
Маржа: 20px 0;
}
.ярлык{
фоновый цвет: #CCC;
Подкладка: 5px 0;
}
.tag li {
Заполнение: 0 10px;
РЕДУРНАЯ ЛЕРФ: 1PX SOLID #FFF;
курсор: указатель;
}
.tag li: Первый ребенок {
Лябочка границы: прозрачный;
}
.tag li.active {
фоновый цвет: #DDD;
}
.scroll {
позиция: относительно;
Заполнение: 10px;
маржинальный бат: 20px;
фоновый цвет: #DDD;
}
.сворачивать{
переполнение: скрыто;
}
.содержание{
Мин-ширина: 3000px;
Высота: 200px;
}
.content ul {
Плавание: осталось;
}
.content ul li {
дисплей: встроенный блок;
максимальная ширина: 200px;
}
#prev,#Next {
Ширина: 50px;
Высота: 50px;
маржинальная версия: -25px;
фоновый цвет: #CCC;
высота линии: 50px;
Текст-альбом: Центр;
курсор: указатель;
}
#prev {
позиция: абсолютно;
слева: 0;
Верх: 50%;
граница-радий: 0 25px 25px 0;
}
#следующий{
позиция: абсолютно;
Справа: 0;
Верх: 50%;
граница радий: 25px 0 0 25px;
}
</style>
<div>
<h1> Проверка прокрутки изображений </h1>
<hr>
<div>
<div id = "wrap">
<div id = "content">
<ul id = "list1">
<li> <img src = "freelance.gif"> </li>
<li> <img src = "button.gif"> </li>
<li> <img src = "load.gif"> </li>
<li> <img src = "Stround.gif"> </li>
</ul>
<ul id = "list2">
</ul>
</div>
</div>
<div id = "prev">
предыдущий
</div>
<div id = "Next">
следующий
</div>
</div>
</div>
<Скрипт>
var wrood = document.getElementbyId ('wrap');
var list1 = document.getElementbyId ('list1');
var list2 = document.getElementbyId ('list2');
var prov = document.getElementbyId ('prev');
var next = document.getElementById ('Next');
// Создать копию списка контента
list2.innerhtml = list1.innerhtml;
// изменение влево
функция scroll () {
if (wrap.scrollleft> = list2.offsetwidth) {
wrap.scrollleft = 0;
}
еще{
raw.scrollleft ++;
}
}
timer = setInterval (Scroll, 1);
// Использовать clearInterval () для пребывания мыши
wrap.onmouseover = function () {
ClearInterval (таймер);
}
wrap.onmouseout = function () {
timer = setInterval (Scroll, 1);
}
// ускоряется влево
функция scroll_l () {
if (wrap.scrollleft> = list2.offsetwidth) {
wrap.scrollleft = 0;
}
еще{
raw.scrollleft ++;
}
}
// прокручивать вправо
функция scroll_r () {
if (wrap.scrollleft <= 0) {
raw.scrollleft+= list2.offsetwidth;
}
еще{
wrap.scrollleft--;
}
}
prev.onclick = function () {
ClearInterval (таймер);
изменение (0)
}
Next.onclick = function () {
ClearInterval (таймер);
изменение (1)
}
Функция изменений (r) {
if (r == 0) {
timer = setInterval (scroll_l, 60);
wrap.onmouseout = function () {
timer = setInterval (scroll_l, 60);
}
}
if (r == 1) {
timer = setInterval (scroll_r, 60);
wrap.onmouseout = function () {
timer = setInterval (scroll_r, 60);
}
}
}
</script>
</body>
Очень краткий и практический код, пожалуйста, украсьте его в соответствии с потребностями вашего проекта.