В команде меня внезапно спросили, как реализовать изображения каруселей. Я был на переднем поле более года, но я не писал его сам в течение долгого времени. Я всегда использовал плагин, чтобы написать его в Daniu. Сегодня я напишу простой учебник, подходящий для начинающих. Конечно, существует много принципов реализации и дизайна диаграмм каруселей. Я говорю здесь о том, чтобы реализовать их с помощью процесса, ориентированного на процесс функционального программирования. По сравнению с объектно-ориентированными шаблонами проектирования, код неизбежно будет выглядеть раздутым и избыточным. Но отсутствие объектно-ориентированной абстракции очень подходит для новичков, чтобы понять и учиться. Студенты, которые уже находятся в летучей мыши, надеются меньше впрыскивать. Вы также можете дать больше предложений.
Принцип диаграммы карусели:
Серия изображений равных размеров имеет плиткой, используя компоновку CSS для отображения только одного изображения, а остальные скрыты. Автоматическое воспроизведение достигается путем расчета смещения с использованием таймера или переключения изображений путем вручную нажав на события.
HTML Mayout
Во -первых, родительский контейнер хранит все содержимое, а список детских контейнеров содержит изображения. Кнопки субконсонтеров хранят кнопки.
<div id = "container"> <div id = "list" style = "слева: -600px;"> <img src = "img/5.jpg"/> <img src = "img/1.jpg"/> <img src = "img/2.jpg"/> <img src = "img/2.jpg"/> <img src = "img src =". /> <img src = "img/4.jpg"/> <img src = "img/5.jpg"/> <img src = "img/1.jpg"/> </div> <div id = "кнопки"> <span index = "1" index = "3"> </span> <span index = "4"> </span> <span index = "5"> </span> </div> <a href = "javascript:;" id = "prev"> <</a> <a href = "javascript:;" id = "Далее" >> </a> </div>
Оптимизируйте, бесшовную прокрутку.
Когда вы переходите с последнего изображения на первое изображение, существует большой пробел, и используете два вспомогательных изображения, чтобы заполнить этот разрыв.
Вот бесшовная прокрутка, посмотрите на код напрямую, скопируйте последнюю картину, прежде чем разместить первое изображение, и скопируйте первое изображение за последним изображением. И скрыть первое вспомогательное изображение изображения (на самом деле на самом деле отображается пятое изображение, так что Set style = "слева: -600px;")
Модификация CSS
1. Понимание модели коробки, поток документов и проблемы с абсолютным позиционированием.
2. Обратите внимание на переполнение: скрыто из списка; Только отобразите изображение окна и скрыть левую и правую сторону.
3. Убедитесь, что каждый слой пролета в кнопках увенчан и установите его до самого верхнего. (Z-Index: 999)
* {рентабельность: 0; падки: 0; текстовое-декорация: none;} body {padding: 20px;}#контейнер {ширина: 600px; высота: 400px; граница: 3px solid#333; Overflow: Hidden; позиция: Abless;}#listex#whid: 4200px; {ширина: 600px; высота: 400px; float: слева;}#кнопки {Положение: Абсолют; Высота: 10px; ширина: 100px; z-index: 2; внизу: 20px; слева: 250px;}#кнопки Span: 10px; #333; маржинальный правый: 5px;} #кнопки .on {founal: orangered;}. Arrow {cursor: pointer; отображение: нет; Rgba (0, 0, 0, .3); Color: #fff;}. Arrow: Hover {background-color: rgba (0, 0, 0, .7);}#Контейнер: Hover .Arrow {display: block;}#prev {left: 20px;}#nhive {справа: 20px;}Младший
Во -первых, мы сначала осознаем эффект от ручного щелчка левой и правой стрелки, чтобы переключить изображение:
window.onload = function () {var list = document.getElementbyId ('list'); var prov = document.getElementbyId ('virow'); var next = document.getElementbyId ('next'); функция Animate (Offset) {// Что получено. быть округлым Parseint (), чтобы преобразовать его в число. var newleft = parseint (list.style.left) + offset; list.style.left = newleft + 'px';} prev.onclick = function () {animate (600);} next.onclick = function () {animate (-600);}};После запуска мы обнаружим, что если вы продолжите нажимать на стрелку правой, будет пробел, и вы не сможете вернуться к первой картинке. Нажмите на стрелку левого, чтобы вернуться к первому изображению.
Используя Google Chrome F12, причина в том, что мы используем смещение, оставшееся для получения картинки. Когда мы увидим, что левое значение составляет менее 3600, будет пусто, если нет 8 -й картинки, поэтому нам нужно вынести суждение о смещении здесь.
Добавьте этот абзац в функцию одольности:
if (newleft <-3000) {list.style.left = -600 + 'px';} if (newleft> -600) {list.style.left = -3000 + 'px';}ОК, запусти, без проблем. Карусель картинки, как следует из названия, представляют собой картинки, которые вы можете переместить. В настоящее время нам нужно использовать встроенный таймер объекта браузера.
Для таймеров необходимо объяснить разницу между setInterval () и settimeout. Проще говоря, setInterval () выполняется несколько раз, а SetTimeout () выполняется только один раз.
Для получения более конкретного использования вы можете нажать на ссылку, чтобы просмотреть разницу: window.setInterval window.settimeout.
Здесь мы используем SetInterval (), потому что наше изображение должно быть прокрутка. Вставьте ниже
var Timer; function play () {timer = setInterval (function () {prev.onclick ()}, 1500)} play ();Беги, хорошо!
Однако, когда мы хотим тщательно посмотреть на определенное изображение, нам нужно остановить изображение, и мы можем просто очистить таймер. Этот метод используется здесь.
Здесь нам нужно работать на его DOM и нужно получить всю область карты каруселей;
var container = document.getElementById ('intainer'); function stop () {clearInterval (timer);} container.onmouseover = stop; container.onmouseout = play;Но здесь картина карусели была в основном завершена, и некоторые студенты спросят, так что это так просто. Вы видели ряд маленьких точек под картинкой? Я добавил вам функции.
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------. ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------.
Вот обновленная версия:
var buttons = document.getElementbyId ('buttonts'). getElementsbytagname ('span'); var index = 1; function buttonsshow () {// предыдущий стиль должен быть очищен для (var i = 0; i <buttons.length; i ++) {if (buttonons [i] .classname == 'on') {buttons [i]. '';}} // массив начинается с 0, поэтому индекс нуждается в -1buttons [index -1] .classname = 'on';} prev.onclick = function () {index -= 1; if (index <1) {index = 5;} buttonshow (); anime (600); Индекс будет продолжать расти. У нас есть только 5 небольших точек, поэтому нам нужно сделать индекс суждения += 1; if (index> 5) {index = 1;} buttonshow (); Animate (-600);}Сейчас это кажется гораздо более нормальным, но мы хотим нажать на одну из маленьких точек в любое время с мышью и переключиться на соответствующее изображение. Тот же принцип: нам все еще нужно найти соответствующую картинку через смещение.
Для (var i = 0; i <buttons.length; i ++) {кнопки [i] .onclick = function () {// optimize, нажмите текущую точку в текущем изображении и не выполняйте следующий код. if (this.classname == "on") {return;}/* offset get: Здесь вы получаете позицию, в которой мышь перемещается в точку, используйте это, чтобы привязать индекс к кнопкам объектов [i], перейдите в Google это использование* //* Поскольку индекс, вот индивидуальный атрибут, вам нужно использовать метод Dom2. parseint (this.getattribute ('index')); var offset = 600 * (clickindex - index); animate (offset); // хранит положение после щелчка мыши, и используйте ее для отображения точек как обычный index = clickIndex; buttonsShow ();}}Все, возможно, вы обнаружили, что эта картина карусели немного странно и непредсказуемо. Он переключается влево, так что перепишите:
Function Play () {// переключить изображение карусели, чтобы переключить изображение на правый таймер = setInterval (function () {next.onclick ();}, 2000)} <! Doctype html> <html> <Head> <meta charset = "utf-8"> <Tite> </title> <стиль = " 0; текстовое-декорация: none;} body {padding: 20px;}#incueter {width: 600px; высота: 400px; граница: 3px solid#333; overflow: hidden; позиция: относительно;}#list {width: 4200px; высота: 400px; позиция: Absolute; z-index:##; 600px; высота: 400px; float:}}#кнопки {Положение: абсолютное; высота: 10px; ширина: 100px; z-index: 2; внизу: 20px; слева: 250px;}#кнопки Span {cursor: 10px; #333; маржинальный правый: 5px;} #кнопки .on {founal: orangered;}. Arrow {cursor: pointer; отображение: нет; Rgba (0, 0, 0, .3); Color: #fff;}. Arrow: Hover {фоновый цвет: rgba (0, 0, 0, .7);}#Контейнер: Hover .Arrow {Display: Block;}#Prev {Left: 20px;}#next {справа: 20px;} </style> <script = "j. это использование*//*dom event*//*timer*/window.onload = function () {var container = document.getelementbyid ('intainer'); var list = document.getelementbyid ('list'); var buttongons = document.getElementbyid ('buttons'). getelementsbytagname ('span'); document.getElementById ('next'); var index = 1; var timer; функция Animate (Offset) {// что получено style.left, то есть расстояние, чтобы получить относительно левого, поэтому после первой картины стиль. Left - все отрицательно, // и style.left - это струна, которая должна быть окружена Paclseint (), чтобы преобразовать его в номер. var newleft = parseint (list.style.left) + offset; list.style.left = newleft + 'px'; // Infinite Scrolling Sudge if (newleft> -600) {list.style.left = -3000 + 'px';} if (newleft <-3000) {list.style.left = -6 + '}}' nemleft <-3000) {list.style.left = -6 + '}'} ') {3000). play () {// Повторяющуюся выполнение Timer = setInterval (function () {next.onclick ();}, 2000)} function spet () {clearInterval (timer);} функция ButtonSshow () {// Очистить стиль предыдущей маленькой точки для (var i = 0; i <bultons.length; i ++) {if on name) {кнопки [i] .classname = "";}} // массив начинается с 0, поэтому индекс потребности -1buttons [index -1] .classname = "on";} prev.onclick = function () {index -= 1; if (index <1) {index = 5} buttonsshow (); {// Из -за эффекта вышеприведенного таймера индекс будет продолжать увеличиваться. У нас есть только 5 небольших точек, поэтому нам нужно сделать индекс суждения+= 1; if (index> 5) {index = 1} animate (-600); buttonsshow ();}; for (var i = 0; i <buttons.length; i ++) {Buttons [i] .onclick = function () {//woptize, нажмите на актуальную маленькую точку в текущем значении. if (this.classname == "on") {return;}/* Здесь мы получаем позицию, в которой мышь перемещается в точку, используйте это, чтобы связать индекс к кнопкам объектов [i], перейдите в Google это использование* //* Поскольку индекс, вот пользовательский атрибут, вам нужно использовать метод level-level levelttribute () для получения атрибута* var* var* var. parseint (this.getattribute ('index')); var offset = 600 * (clickindex - index); // Этот индекс является индексантным (смещением); index = clickIndex; // Хранение позиции после щелчка мыши и используйте ее для отображения dotsshow ();}} container.onmouseover = stop; container.onmouseout = play; play ();} </script> </head> <body> <div id = "контейнер"> <div id = list "style =" -600Px; src = "img/1.jpg"/> <img src = "img/2.jpg"/> <img src = "img/3.jpg"/> <img src = "img/4.jpg"/> <img src = "img/5.jpg"/> <img src = "img/5. src = "img/2.jpg"/> <img src = "img/3.jpg"/> <img src = "img/4.jpg"/> <img src = "img/5.jpg"/> <img src = "img/1.jpg"/> </div> <div Id = "> <pran index ="/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/". index = "2"> </span> <span index = "3"> </span> <span index = "4"> </span> <span index = "5"> </span> </div> <a href = "javascript:;" id = "prev"> </a> <a href = "javascript:;" id = "Далее" >> </a> </div> </body> </html>Выше приведено простой код JS Carousel, представленный вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!