Основываясь на предыдущей статье с использованием JS для реализации кода эффекта карусели изображения (I), добавлено событие ответа стрелок левого и правого, а также нажатие на стрелки левого и правого также может сделать прокрутку изображения:
Код JS выглядит следующим образом:
window.onload = function () {// инициализация Carousel var lunbo = document.getElementById ('content'); varustems = lunbo.getElementsbytagname ('img'); varuls = lunbo.getElementsbytagname ('ul'); var lis = lunbo.getElementsbytagname ('li'); document.getElementById ('prev'); var item = 0; // В начальном состоянии в режиме выделения hils [0] .style.fontsize = '26px'; lis [0] .style.color = '#ffff'; imgs [0] .style.displayex 'block';//deffie variable varible orable orable oraintrable oraintrive oraintrable orainte ariindeex varifteex varifteex = varible orable. 1; // Автоматическая карусель. Используйте PIC_TIME, чтобы записать воспроизведение, и вы можете использовать clearInterval (), чтобы очистить его в любое время. var pic_time = setInterval (autoBoFang, 1000); // Функция обработки событий AutoPlay AutoBoFang () {if (pic_index> = lis.length) {pic_index = 0;} picchange (pic_index); pic_index ++;} // manaual carousel for (var i = 0; i <lis.length; lis [i] .addeventListener ("mouseover", изменение, false);} function изменение (event) {var event = event || window.event; var target = event.target || event.srcelement; 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'; } // Когда мышь приближается к области изображения, автоматическое воспроизведение останавливает lunbo.addeventlistener ("mouseover", function () {clearInterval (pic_time);}, false); // Когда мышь выходит из области изображения, автоматическое воспроизведение продолжает lunbo.addeventListener ("mouseout", function () {pic_time продолжает lunbo.addeventlistener ("mouseout", function () {pic_time. SetInterval (AutoBoFang, 1000); 2) {item = 0;} else {item+= 1;} picChange (item);} prev.AddeventListener ("click", moveprev, false); function moveprev () {if (item == 0) {item = 2;} else {item- = 1;} picchange (item);Диаграмма воспроизведения: диаграмма воспроизведения мыши, проходящей стрелку
Когда мышь нажимает на стрелку, изображение изменится, а небольшой круг ниже также отобразит эффект выделения соответствующего изображения.
Суммировать:
Основной эффект карусели был достигнут. Что нужно сделать позже, так это упростить и инкапсулировать код и повысить эффективность работы.