Эта статья разделена на предыдущие и следующие статьи. Я разделяю восемь классических эффектов JS Focus Carousel для вашей ссылки. Конкретный контент заключается в следующем
Основной макет:
<div id = "box"> <ul id = "ul"> <li style = 'display: block;'> <img src = "Images/1.jpg"> </li> <li> <img src = "Images/2.jpg"> </li> <li> <img src = "Images/3.jpg"> </li> <li> <img src = " <li> <img src = "Images/5.jpg"> </li> </ul> <ol id = 'ol'> <li class = 'active'> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </ol> </div>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------.
1. Нормальная карта фокусировки
window.onload = function () {var oul = document.getElementById ('ul'); var ali_u = oul.getelementsbytagname ('li'); var ool = document.getElementbyId ('ol'); var ali_o = ool.getelementsbytagname ('li'); for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .index = i; ali_o [i] .onmouseover = function () {for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .classname = '' '; ali_u [i] .style.display = 'none'; } this.classname = 'active'; // console.log (ali_o [this.index]); ali_u [this.index] .style.display = 'block'; }}}Воспроизведение: картинка опущена
2. Fade Effect
var oul = document.getElementById ('ul'); var ali_u = oul.getElementsbytagname ('li'); var ool = document.getElementbyId ('ol'); var ali_o = ool.getElementsbytagname ('li'); для (var i = 0; i <ali_o.l dipend; ali_o [i] .onmouseover = function () {for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .classname = '' '; ali_u [i] .style.display = 'none'; ali_u [i] .style.filter = 'alpha (непрозрачность = 0)'; ali_u [i] .style.opacity = 0; } this.classname = 'active'; ali_u [this.index] .style.display = 'block'; startMove (ali_u [this.index], {непрозрачность: 100}); };}Изображение воспроизведения:
3. Эффект прокрутки:
var oul = document.getElementbyId ('ul'); var ali_u = oul.getelementsbytagname ('li'); var ool = document.getElementbyId ('ol'); var ali_o = ool.getElementsbytagname ('li'); var liheight = ali_u [0] i = 0; i <ali_o.length; i ++) {ali_o [i] .index = i; ali_o [i] .onmouseover = function () {for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .classname = '' '; this.classname = 'active'; startMove (oul, {top: -this.index*liheight}); }};}Изображение воспроизведения:
4. регулярно прокручивайте вверх и вниз:
window.onload = function () {var obox = document.getElementById ('box'); var oul = document.getElementbyId ('ul'); var ali_u = oul.getelementsbytagname ('li'); var ool = document.getElementbyId ('ol'); var ali_o = ool.getelementsbytagname ('li'); var liHeight = ali_u [0] .offsetheight; var inow = 0; // текущий индекс var timer = null; // таймер для (var i = 0; i <ali_o.length; i ++) {ali_o [i] .index = i; ali_o [i] .onmouseover = function () {for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .classname = '' '; this.classname = 'active'; // Создание отношений: очень важно inow = this.index; startMove (oul, {top: -this.index*liheight}); }}; // Open Timer Timer = setInterval (Torun, 2000); obox.onmouseover = function () {clearInterval (таймер); }; obox.onmouseout = function () {timer = setInterval (Torun, 2000); }; // Временная функция функции torun () {if (inow == ali_o.length-1) {inow = 0; } else {inow ++; } for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .classname = '' '; } ali_o [inow] .classname = 'active'; startMove (oul, {top: -inow*liHeight}); }};Изображение воспроизведения:
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения. Я также надеюсь, что все будут поддерживать wulin.com и продолжать обращать внимание на более захватывающие карусели Focus.