Dieser Artikel ist in frühere und nächste Artikel unterteilt. Ich teile acht klassische Effekte von JS Focus Carousel für Ihre Referenz. Der spezifische Inhalt ist wie folgt
Grundlayout:
<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 = "bilder/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> </div> </div> </div> </div> </div> </ol> </ol> </div>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1. Normale Fokuskarte
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'); für (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'; }}}Reproduktion: Bild weggelassen
2. Fade -Effekt
var OUL = document.getElementById ('ul'); var ali_u = OUl.GetElementsByTagName ('li'); var ool = document.getElementById ('ol'); var al ali_o = ool.getElementsByTagname ('li'); for (var i = 0; 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 (opacity = 0)'; ali_u [i] .style.opacity = 0; } this.className = 'active'; ali_u [this.index] .style.display = 'block'; startMove (ali_u [this.index], {opacity: 100}); };}Reproduktionsbild:
3.. Scrollen Sie nach oben: Effekt:
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: -dis.index*liHeight}); }};}Reproduktionsbild:
4. Regelmäßig nach oben und unten scrollen:
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] .offseteight; var Inow = 0; // aktueller Index var Timer = null; // Timer für (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'; // Beziehung aufbauen: Sehr wichtige Inow = this.index; startMove (Oul, {top: -dis.index*liHeight}); }}; // Timer Timer = setInterval öffnen (Torun, 2000); obox.onmouseover = function () {ClearInterval (Timer); }; obox.onmouseout = function () {timer = setInterval (Torun, 2000); }; // zeitgesteuerte Funktionsfunktion torun () {if (Inow == ali_o.length-1) {Inow = 0; } else {Inow ++; } für (var i = 0; i <ali_o.length; i ++) {ali_o [i] .className = ''; } ali_o [Inow] .ClassName = 'Active'; startMove (Oul, {top: -inow*liHeight}); }};Reproduktionsbild:
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein. Ich hoffe auch, dass jeder Wulin.com unterstützt und weiterhin auf aufregende Fokuskarusselle achtet.