Continuez à l'article précédent pour apprendre parfaitement à mettre en œuvre huit types de carrousels JS Focus (article précédent), pour votre référence, le contenu spécifique est le suivant
5. En temps opportun de haut en bas de manière transparente
Idées:
1. Idée 1: Copiez une copie d'UL, mais revenez à la position par la moitié de la distance de défilement; (Les grands sites Web fonctionnent légèrement plus bas);
2. Idée 2: Grâce à un positionnement relatif, déplacez le premier Li à la fin, puis retournez UL et Li pour positionner.
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; // valeur pour le bouton var inow2 = 0; // utilisé pour faire défiler 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 = 'actif'; // Build Relation: très important inow = this.index; inow2 = this.index; startMove (oul, {top: -this.index * liheight}); }}; } temporaire = setInterval (Torun, 2000); obox.onmouseOver = function () {ClearInterval (Timer); }; obox.onmouseout = function () {timer = setInterval (Torun, 2000); }; fonction torun () {if (inow == 0) {// restaurer li et placer ul ali_u [0] .style.position = 'statique'; oul.style.top = 0; // N'oubliez pas de restaurer inow2 à inow2 = 0; } if (inow == ali_o.length-1) {// déplacez le premier Li vers le dernier inow = 0; ali_u [0] .style.position = 'relative'; ali_u [0] .style.top = ali_u.length * liheight + 'px'; } else {inow ++; } inow2 ++; pour (var i = 0; i <ali_o.length; i ++) {ali_o [i] .classname = ''; } ali_o [inow] .classname = 'active'; startMove (oul, {top: -inow2 * liheight}); }};Image de reproduction:
6. L'effet de la commutation transparente entre gauche et droite
Idées:
1. Positionnement absolu: Tous les LI, à l'exception du premier, sont positionnés vers la droite, comparez la valeur de l'indice avec l'indice actuel et localisent la position du Li pour apparaître.
2. Ajouter "commutateur" ou "intervalle de temps" pour contrôler la fréquence de commutation de mouvement!
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'); var liWidth = ali_u [0] .offsetWidth; var inow = 0; var bbtn = true; // tous positionnés vers la droite à l'exception du premier élément pour (var i = 1; i <ali_u.length; i ++) {ali_u [i] .style.left = liWidth + 'px'; } pour (var i = 0; i <ali_o.length; i ++) {ali_o [i] .index = i; ali_o [i] .onMouseOver = function () {if (bbtn) {bbtn = false; pour (var i = 0; i <ali_o.length; i ++) {ali_o [i] .classname = ''; } this.classname = 'actif'; // juge gauche et droit shift if (inow <this.index) {// localisez le li ali_u [this.index] .style.left = liWidth + 'px'; // déplacez le LI actuel de 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; // Le mouvement suivant ne peut être effectué qu'après la fin du mouvement actuel}); // attribue l'index actuel à inow = this.index; } // Switch si se termine}; }};Image de reproduction:
7. Effet d'accordéon
1. Idée 1: Faites-le en changeant la largeur de Li;
2. Idée 2: Tous les Li, sauf que le premier élément est positionné à intervalles égaux, et la position est modifiée de manière équidistante après le déclenchement de l'événement.
window.onload = function () {var oul = document.getElementyId ('ul'); var ali_u = oul.getElementsByTagName ('li'); // tout positionnement sauf le premier élément pour (var i = 1; i <ali_u.length; i ++) {// isométrique 30px positionnement ali_u [i] .style.left = (470-3 * 40) + (i-1) * 30 + 'px'; } pour (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) {// toutes les arrangements gauchers plus petits que l'index startmove (ali_u [i], {gauche: i * 30}); } else {// toutes les bonnes arrangements supérieurs à l'index startmove (ali_u [i], {gauche: (470-3 * 40) + (i-1) * 30}); }}}}}}};Image de reproduction:
8. Effet d'accordéon 2
Positionnez également Li sur la base précédente!
window.onload = function () {var oul = document.getElementyId ('ul'); var ali_u = oul.getElementsByTagName ('li'); var num = math.ceil (470 / ali_u.length); // largeur de chacun // tout positionnement sauf le premier élément pour (var i = 1; i <ali_u.length; i ++) {ali_u [i] .style.left = num * i + 'px'; } pour (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], {Left: i * 30}); } else {startmove (ali_u [i], {Left: (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}); }}; }};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 et j'espère que tout le monde soutiendra davantage Wulin.com.