Продолжайте до предыдущей статьи, чтобы научиться идеально реализовать восемь типов JS Focus Carousels (предыдущая статья), для вашей ссылки конкретный контент заключается в следующем
5. Своевременное прокрутку вверх и вниз беспрепятственно
Идеи:
1. Идея 1: Скопируйте одну копию UL, но вернитесь в положение на половину расстояния прокрутки; (большие сайты работают немного ниже);
2. Идея 2: Через относительное позиционирование переместите первое LI до конца, а затем верните UL и LI в положение.
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 inow2 = 0; // используется для прокрутки var timer = null; 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 = '' '; this.classname = 'active'; // Создание отношений: очень важно inow = this.index; inow2 = this.index; startMove (oul, {top: -this.index*liheight}); }}; } timer = setInterval (Torun, 2000); obox.onmouseover = function () {clearInterval (таймер); }; obox.onmouseout = function () {timer = setInterval (Torun, 2000); }; function torun () {if (inow == 0) {// восстановить li и поместить ul ali_u [0] .style.position = 'static'; oul.style.top = 0; // не забудьте восстановить inow2 до inow2 = 0; } if (inow == ali_o.length-1) {// переместить первое LI на последний iNow = 0; ali_u [0] .style.position = 'относительный'; ali_u [0] .style.top = ali_u.length*liheight+'px'; } else {inow ++; } inow2 ++; for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .classname = ''; } ali_o [inow] .classname = 'active'; startMove (oul, {top: -inow2*liheight}); }};Изображение воспроизведения:
6. Эффект бесшовного переключения между левым и правым
Идеи:
1. Абсолютное позиционирование: все LI, за исключением первого, расположены вправо, сравните значение индекса с текущим индексом и найдите положение LI, чтобы появиться.
2. Добавьте «переключатель» или «интервал времени», чтобы управлять частотой переключения движения!
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'); var liwidth = ali_u [0] .OffSetWidth; var inow = 0; var bbtn = true; // все расположены вправо, за исключением первого элемента для (var i = 1; i <ali_u.length; i ++) {ali_u [i] .style.left = liwidth+'px'; } for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .index = i; ali_o [i] .onmouseover = function () {if (bbtn) {bbtn = false; for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .classname = ''; } this.classname = 'active'; // Судья влево и правое сдвиг if (inow <this.index) {// найти li ali_u [this.index] .style.left = liwidth+'px'; // переместить текущую Li Away Startmove (ali_u [inow], {left: -liwidth}); } else if (inow> this.index) {ali_u [this.index] .style.left = -liwidth+'px'; startMove (ali_u [inow], {left: liwidth}); } startMove (ali_u [this.index], {left: 0}, function () {bbtn = true; // Следующее движение может быть выполнено только после завершения текущего движения}); // назначить текущий индекс inow = this.index; } // переключить, если кончится}; }};Изображение воспроизведения:
7. Эффект аккордеона
1. Идея 1: Сделайте это, изменив ширину LI;
2. Идея 2: Все LI, кроме первого элемента, расположены с одинаковыми интервалами, и позиция равносильно изменяется после запуска события.
window.onload = function () {var oul = document.getElementById ('ul'); var ali_u = oul.getelementsbytagname ('li'); // все позиционирование, кроме первого элемента для (var i = 1; i <ali_u.length; i ++) {// isometric 30px позиционирование ali_u [i] .style.left = (470-3*40)+(i-1)*30+'px'; } for (var i = 0; i <ali_u.length; i ++) {ali_u [i] .index = i; ali_u [i] .onmouseover = function () {for (var i = 0; i <ali_u.length; i ++) {ali_u [i] .index = i; ali_u [i] .onmouseover = function () {for (var i = 0; i <ali_u.length; i ++) {if (i <= this.index) {// Все левые договоренности меньше, чем индекс startMove (ali_u [i], {слева: i*30}); } else {// Все правые аранжировки больше, чем индекс startMove (ali_u [i], {слева: (470-3*40)+(i-1)*30}); }}}}}}};Изображение воспроизведения:
8. Эффект аккордеона 2
Положение Li равномерно на предыдущей основе!
window.onload = function () {var oul = document.getElementById ('ul'); var ali_u = oul.getelementsbytagname ('li'); var num = math.ceil (470/ali_u.length); // ширина каждого // все позиционирование, кроме первого элемента для (var i = 1; i <ali_u.length; i ++) {ali_u [i] .style.left = num*i+'px'; } for (var i = 0; i <ali_u.length; i ++) {ali_u [i] .index = i; ali_u [i] .onmouseover = function () {for (var i = 0; i <ali_u.length; i ++) {ali_u [i] .index = i; ali_u [i] .onmouseover = function () {for (var i = 0; i <ali_u.length; i ++) {if (i <= this.index) {startMove (ali_u [i], {слева: i*30}); } else {startMove (ali_u [i], {слева: (470-3*40)+(i-1)*30}); }}}}; ali_u [i] .onmouseout = function () {for (var i = 0; i <ali_u.length; i ++) {startMove (ali_u [i], {left: num*i}); }}; }};Изображение воспроизведения:
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.