1. Принцип реализации
(1) Поместите все картинки в родительский контейнер -див и установите внешний вид и скрыть изображения через атрибут дисплея;
(2) диаграмма карусели разделена на ручную карусель и автоматическую карусель;
В центре внимания ручной карусели уделяется щелчок по маленькому кругу под изображением каждый раз, когда вы нажимаете на него, получаете его номер индекса и позволяли отображать изображение с соответствующим номером индекса, а небольшой круг в настоящее время выделяется;
Автоматическая карусель: используйте таймер setInterval (), чтобы воспроизводить изображение каждый раз.
(3) Все базовые знания: операция DOM, таймер, приложение события.
2. Макет страницы картинки каруселя:
<div id = "content"> <!-Тотальный родительский контейнер-> <div> <!-Контейнер, содержащий картинки-> <div> <img src = "./ img/lunbo1.jpg"> </div> <div> <img src = "./ img/lunbo2.jpg"> </div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <img src = "./lunbo2.jpg" Индикация Круг под изображением-> <ul> <li id = 'pic1'> ● </li> <li id = 'pic2'> ● </li> </ul> <!-Прокрутите левые и правые стрелки изображения вперед и назад-> <a href = "#"> <span> </span> </a> <a href = "#"> <span >> </span> </a> <a href = "#"
3. CSS -стиль диаграммы карусели:
#content {ширина: 100%; высота: 500px; положение: относительно;}. Карусель-иннер {позиция: относительная; ширина: 100%; переполнение: скрыто; Высота: 500px; } .carousel-inner> .item> img {display: block; высота линии: 1; z-index: 1;}. Карусель-индикаторы {Положение: Абсолют; внизу: 10px; слева: 45%; z-index: 2; list-style-type: none;}. Карусель-индикаторы li {Display: встроенный блок; Padding: 0 15px; size-size: 24px;#999; Курсор: Pointer; z-index: 2;}. Active1 {font-size: 28px; color: #fff;}. Carousel-Control {положение: абсолютное; 3;}. Carousel-Control: Hover {color: fff; текстовое-декорация: нет; непрозрачность: .9; схема: нет; нет; Слева: 20px; } .next {top: 30%; справа: 20px;}4. Код реализации JS для диаграммы карусели:
window.onload = function () {// инициализация carousel var lunbo = document.getelementbyid ('content'); var imgs = lunbo.getelementsbytagname ('img'); var uls = lunbo.getElementsByTagName('ul');var lis = lunbo.getElementsByTagName('li');//In the initial state, a circle is in the highlight mode lis[0].style.fontSize = '26px';lis[0].style.color = '#fff';//Define a global variable to automatically change the order of the image carousel var pic_index = 1; // Автоматическая карусель. Используйте PIC_TIME, чтобы записать воспроизведение, вы можете использовать ClearInterval (), чтобы очистить его в любое время. var pic_time = setInterval (autoboFang, 3000); // ручное карусель для (var i = 0; i <lis.length; i ++) {lis [i] .AdDeventListener ("mouseOver", изменение, false);} изменение функции (событие) {var event = event || window.event; var target = event.target. var kids = target.parentnode.children; for (var i = 0; i <kinds.length; i ++) {if (target == kids [i]) {picchange (i); }}} // Функция переключения изображения функция Picchange (i) {// Пусть все изображения не будут отображаться, и все круги находятся в нормальном стиле для (var J = 0; j <imgs.length; j ++) {imgs [j] .style.display = 'non'; lis [j] .style.fontsize = '24px'; lis [j] .style.color = '#999';} // Пусть отображается выбранное изображение индекса, и соответствующий круг выделяется imgs [i] .style.display = 'block'; lis [i] .style.fontsize = '26px'; lis [i] .style.color = '#fff'; } // Функция обработки событий Autoplay AutoBoFang () {if (pic_index> = lis.length) {pic_index = 0;} изменение1 (pic_index); pic_index ++;} // События в преобразовании автоматического воспроизведения функции изображения 1 (index) {picchange (Index); Uls [0] .AddeventListener ("MouseOver", пауза, false); // Мышь выводит тег UL, автоматически играет на картинке продолжается uls [0] .AdDeventListener ("Mouseout", Go, false);} // Auto воспроизводит функцию паузы (событие) {var = event || target = event.target || event.srcelement; switch (target.id) {case "pic1": clearInterval (pic_time); Break; Case "pic2": clearInterval (pic_time); break; case "pic3": clearInterval (pic_time); break;}} // Автопазображение Protening Function go (event) {var event = vindow.event; var target = event.target || event.srcelement; switch (target.id) {case "pic1": pic_index = 1; pic_time = setInterval (AutoBoFang, 3000); Break; Case "pic2": pic_index = 2; pic_time = setInterval (AutoBoFang, 3000); Break; Case "Pic3": pic_index = 3; pic_time = setInterval (AutoBoFang, 3000); Break;}}}5. Изображение воспроизведения:
6. Проблемы и недостатки столкнулись
Проблема: Когда мышь в первый раз перемещается в тег UL, картина автоматической карусели останавливается, мышь выходит, и автоматическая карусель продолжается, но по мере выполнения операции изображение карусели меняется быстрее и быстрее, и щелчок тег UL в это время больше не работает.
Причина проблемы: когда таймер снова используется после остановки карусели, значение не назначается PIC_TIME для записи, поэтому мышь снова не перемещается в тег UL, чтобы очистить таймер. Следовательно, щелчок тег UL снова не может приостановить автоматическое воспроизведение каруселей, и скорость становится быстрее и быстрее.
Неадекватность: эффект безреальной прокрутки, подобного диаграмме каруселей Taobao, не был достигнут, а индикаторный эффект левых и правых стрел не был завершен. Они будут по -прежнему изучаться на более позднем этапе, улучшить и делиться.