Cet article est divisé en articles précédents et suivants. Je partage huit effets classiques du carrousel JS Focus pour votre référence. Le contenu spécifique est le suivant
Disposition de base:
<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="images/4.jpg"></li> <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> </d> </div>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1. Carte de mise au point normale
window.onload = function () {var oul = document.getElementyId ('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 = 'Aucun'; } this.classname = 'actif'; // console.log (ali_o [this.index]); ali_u [this.index] .style.display = 'block'; }}}Reproduction: image omise
2. Effet de fondu
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.Legth; i ++) {Ali_o [i]. ali_o [i] .onMouseOver = function () {for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .classname = ''; ali_u [i] .style.display = 'Aucun'; ali_u [i] .style.filter = 'alpha (opacity = 0)'; ali_u [i] .style.opacity = 0; } this.classname = 'actif'; ali_u [this.index] .style.display = 'block'; startMove (ali_u [this.index], {opacité: 100}); };}Image de reproduction:
3. Faites défiler l'effet:
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 = 'actif'; startMove (oul, {top: -this.index * liheight}); }};}Image de reproduction:
4. Faites défiler régulièrement de haut en bas:
window.onload = function () {var obox = document.getElementyId ('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; // index actuel var timer = null; // timer pour (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 = 'actif'; // Build Relation: très important inow = this.index; startMove (oul, {top: -this.index * liheight}); }}; // Open Timer Timer = setInterval (Torun, 2000); obox.onmouseOver = function () {ClearInterval (Timer); }; obox.onmouseout = function () {timer = setInterval (Torun, 2000); }; // Fonction Fonction Torun Torun () {if (inow == ali_o.length-1) {inow = 0; } else {inow ++; } pour (var i = 0; i <ali_o.length; i ++) {ali_o [i] .classname = ''; } ali_o [inow] .classname = 'active'; startmove (oul, {top: -inow * liheight}); }};Image de reproduction:
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous. J'espère également que tout le monde soutiendra Wulin.com et continuera de faire attention à des carrousels de concentration plus passionnants.