Fahren Sie mit dem vorherigen Artikel fort, um acht Arten von JS Focus Carousels (vorheriger Artikel) perfekt zu implementieren. Der spezifische Inhalt lautet wie folgt
5. TEMPT SCRORT
Ideen:
1. Idee 1: Kopieren Sie eine Kopie von UL, kehren Sie aber mit der Hälfte der Bildlaufdistanz in die Position zurück. (Große Websites leisten etwas niedriger);
2. Idee 2: Bewegen Sie durch relative Positionierung das erste Li zum Ende und kehren Sie dann UL und Li zur Position zurück.
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; // Wert für die Taste var Inow2 = 0; // verwendet, um var timer = null zu scrollen; 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; Inow2 = this.index; startMove (Oul, {top: -dis.index*liHeight}); }}; } Timer = setInterval (Torun, 2000); obox.onmouseover = function () {ClearInterval (Timer); }; obox.onmouseout = function () {timer = setInterval (Torun, 2000); }; Funktion torun () {if (Inow == 0) {// li restaure und platziere ul ali_u [0] .style.position = 'static'; Oul.Style.top = 0; // Denken Sie daran, INOW2 auf Inow2 = 0 wiederherzustellen; } if (Inow == ali_o.length-1) {// Bewegen Sie das erste Li auf die letzte Inow = 0; ali_u [0] .style.position = 'relative'; ali_u [0] .style.top = ali_u.Length*liHeight+'px'; } else {Inow ++; } Inow2 ++; für (var i = 0; i <ali_o.length; i ++) {ali_o [i] .className = ''; } ali_o [Inow] .ClassName = 'Active'; startMove (Oul, {top: -inow2*liHeight}); }};Reproduktionsbild:
6. Der Effekt des nahtlosen Wechsels zwischen links und rechts
Ideen:
1. Absolute Positionierung: Alle Li -außer der ersten sind nach rechts positioniert, vergleichen Sie den Indexwert mit dem aktuellen Index und lokalisieren die Position des LI zu erscheinen.
2. Fügen Sie "Switch" oder "Zeitintervall" hinzu, um die Frequenz zur Bewegungsschaltfrequenz zu steuern!
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; // alle nach rechts positioniert, bis auf das erste Element für (var i = 1; i <ali_u.length; i ++) {ali_u [i] .style.left = liwidth+'px'; } für (var i = 0; i <ali_o.length; i ++) {ali_o [i] .Index = i; ali_o [i] .onmouseover = function () {if (bBtn) {bbtn = false; für (var i = 0; i <ali_o.length; i ++) {ali_o [i] .className = ''; } this.className = 'active'; // Richter linke und rechte Verschiebung, wenn (Inow <this.index) {// li ali_u [this.index] .style.left = liwidth+'px' lokalisieren; // Bewegen Sie den aktuellen Li-Away startMove (ali_u [Inow], {links: -liwidth}); } else if (Inow> this.index) {ali_u [this.index] .style.left = -liwidth+'px'; startMove (ali_u [Inow], {links: liwidth}); } startMove (ali_u [this.index], {links: 0}, function () {bBtn = true; // Die nächste Bewegung kann erst ausgeführt werden, nachdem die aktuelle Bewegung abgeschlossen ist}); // den aktuellen Index iNow = this.index zuweisen; } // Schalter, wenn}; }};Reproduktionsbild:
7. Akkordeoneffekt
1. Idee 1: Machen Sie es, indem Sie die Breite von Li ändern;
2. Idee 2: Alle Li -außer dem ersten Element sind in gleichen Abständen positioniert, und die Position wird nach Auslöser des Ereignisses gleich davor geändert.
window.onload = function () {var OUl = document.getElementById ('ul'); var ali_u = oul.getElementsByTagName ('li'); // Alle Positionierung mit Ausnahme des ersten Elements für (var i = 1; i <ali_u.length; i ++) {// isometrische 30px-Positionierung ali_u [i] .style.left = (470-3*40)+(i-1)*30+'px'; } für (var i = 0; i <ali_u.length; i ++) {ali_u [i] .Index = i; ali_u [i] .onmouseover = function () {für (var i = 0; i <ali_u.length; i ++) {ali_u [i] .Index = i; ali_u [i] .onmouseover = function () {für (var i = 0; i <ali_u.length; i ++) {if (i <= this.index) {// Alle linken Arrangements kleiner als der Index startMove (ali_u [i], {links: i*30}); } else {// alle richtigen Arrangements größer als der Index startMove (ali_u [i], {links: (470-3*40)+(i-1)*30}); }}}}}}};Reproduktionsbild:
8. Akkordeoneffekt 2
Positionieren Sie Li gleichmäßig auf der vorherigen Basis!
window.onload = function () {var OUl = document.getElementById ('ul'); var ali_u = oul.getElementsByTagName ('li'); var num = math.ceil (470/ali_u.Length); // Breite jedes // alle Positionierung außer dem ersten Element für (var i = 1; i <ali_u.length; i ++) {ali_u [i] .style.left = num*i+'px'; } für (var i = 0; i <ali_u.length; i ++) {ali_u [i] .Index = i; ali_u [i] .onmouseover = function () {für (var i = 0; i <ali_u.length; i ++) {ali_u [i] .Index = i; ali_u [i] .onmouseover = function () {für (var i = 0; i <ali_u.length; i ++) {if (i <= this.index) {startMove (ali_u [i], {links: i*30}); } else {startMove (ali_u [i], {links: (470-3*40)+(i-1)*30}); }}}}; ali_u [i] .onmouseout = function () {for (var i = 0; i <ali_u.length; i ++) {startMove (ali_u [i], {links: num*i}); }}; }};Reproduktionsbild:
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.