Comment créer un cadre d'image continu en JavaScript

Cette Javascript crée un cadre de défilement dans lequel la zone des images où les images se déplacent horizontalement à travers la zone d'affichage. Lorsque chaque image disparaît d'un côté de la zone d'affichage, elle est lue à nouveau au début de la série d'images. Cela crée un défilement continu d'images dans le rectangle de sélection qui boucle, tant que vous avez suffisamment d'images pour remplir la largeur de la zone d'affichage du rectangle de sélection.

Ce script a cependant quelques limitations:

• Les images sont affichées à la même taille (largeur et hauteur). Si les images ne sont pas physiquement de la même taille, elles seront toutes redimensionnées. Cela peut entraîner une mauvaise qualité d'image, il est donc préférable de dimensionner systématiquement vos images source.
• La hauteur des images doit correspondre à la hauteur définie pour le chapiteau, sinon, les images seront redimensionnées avec le même potentiel d'images médiocres mentionné ci-dessus.
• La largeur d'image multipliée par le nombre d'images doit être supérieure à la largeur du rectangle de sélection. La solution la plus simple pour cela s'il n'y a pas suffisamment d'images est de simplement répéter les images dans le tableau pour combler l'écart.
  instagram viewer
• La seule interaction offerte par ce script consiste à arrêter le défilement lorsque la souris est déplacée sur le rectangle de sélection et à reprendre lorsque la souris quitte l'image. Nous décrivons plus tard une modification qui peut être faite pour convertir toutes les images en liens.
• Si vous avez plusieurs chapiteaux sur une page, ils s'exécutent tous à la même vitesse, donc le survol de l'un d'eux les fera tous cesser de bouger.
• Vous avez besoin de vos propres images. Ceux des exemples ne font pas partie de ce script.

Le premier, copiez le JavaScript suivant et enregistrez-le sous marquee.js.

Ce code contient deux tableaux d'images (pour les deux chapiteaux de la page d'exemple), ainsi que deux nouveaux objets mq contenant les informations à afficher dans ces deux chapiteaux.

Vous pouvez supprimer l'un de ces objets et changer l'autre pour afficher un rectangle de sélection continu sur votre page ou répéter ces instructions pour ajouter encore plus de chapiteaux.

La fonction mqRotate doit être appelée en passant mqr une fois que les chapiteaux sont définis pour gérer les rotations.

var
mqAry1 = ['graphics / img0.gif', 'graphics / img1.gif', 'graphics / img2.gif', '
graphics / img3.gif ',' graphics / img4.gif ',' graphics / img5.gif ',' graphics /
img6.gif ',' graphics / img7.gif ',' graphics / img8.gif ',' graphics / img9.gif ',
'graphics / img10.gif', 'graphics / img11.gif', 'graphics / img12.gif', '
graphics / img13.gif ',' graphics / img14.gif '];

var
mqAry2 = ['graphics / img5.gif', 'graphics / img6.gif', 'graphics / img7.gif', '
graphics / img8.gif ',' graphics / img9.gif ',' graphics / img10.gif ',' graphics /
img11.gif ',' graphics / img12.gif ',' graphics / img13.gif ',' graphics / img14.
gif ',' graphics / img0.gif ',' graphics / img1.gif ',' graphics / img2.gif ','
graphics / img3.gif ',' graphics / img4.gif '];

fonction start () {
nouveau mq («m1», mqAry1,60);
new mq ('m2', mqAry2,60); // répéter pour autant de fuields que nécessaire
mqRotate (mqr); // doit venir en dernier
}
window.onload = start;

// Chapiteau d'image continue
// copyright 24 juillet 2008 par Stephen Chapman
// http://javascript.about.com
// l'autorisation d'utiliser ce Javascript sur votre page Web est accordée
// à condition que tout le code ci-dessous dans ce script (y compris ceux-ci
// commentaires) est utilisé sans aucune modification

var
mqr = []; une fonction
mq (id, ary, wid) {this.mqo = document.getElementById (id); var heit =
this.mqo.style.height; this.mqo.onmouseout = function ()
{mqRotate (mqr);}; this.mqo.onmouseover = function ()
{clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw = ary.length;
pour (var
i = 0; ithis.mqo.ary [i] .src = ary [i]; this.mqo.ary [i] .style.position =
'absolu'; this.mqo.ary [i] .style.left = (wid * i) + 'px';
this.mqo.ary [i] .style.width = wid + 'px'; this.mqo.ary [i] .style.height =
heit; this.mqo.appendChild (this.mqo.ary [i]);} mqr.push (this.mqo);}
fonction mqRotate (mqr) {if (! mqr) return; pour (var j = mqr.length - 1; j
> -1; j--) {maxa = mqr [j] .ary.length; pour (var i = 0; imqr [j] .ary [i] .style; x.left = (parseInt (x.left, 10) -1) + 'px';} var y =
mqr [j] .ary [0] .style; if (parseInt (y.left, 10) + parseInt (y.width, 10) <0)
{var z = mqr [j] .ary.shift (); z.style.left = (parseInt (z.style.left) +
parseInt (z.style.width) * maxa) + 'px'; mqr [j] .ary.push (z);}}
mqr [0] .TO = setTimeout ('mqRotate (mqr)', 10);}

Ensuite, ajoutez le code suivant dans la section d'en-tête de votre page:

Nous devons ajouter une commande de feuille de style pour définir l'apparence de chacun de nos chapiteaux.

Voici le code que nous avons utilisé pour ceux de la page d'exemple:

.marquee {position: relative;
débordement caché;
largeur: 500 px;
hauteur: 60px;
bordure: noir solide 1px;
}

Vous pouvez modifier n'importe laquelle de ces propriétés pour votre chapiteau; cependant, il doit rester position: relative.

Vous pouvez soit le placer dans votre feuille de style externe si vous en avez un, soit le placer entre balises en tête de votre page.

L'étape suivante consiste à définir un div dans votre page Web où vous placerez le chapiteau d'images.

Le premier des exemples de chapiteaux a utilisé ce code:

La classe associe cela au code de la feuille de style tandis que l'id est ce que nous utiliserons dans le nouvel appel mq () pour attacher le cadre des images.

La dernière chose à faire pour mettre tout cela ensemble est de vous assurer que votre code pour ajouter l'objet mq dans votre JavaScript après le chargement de la page contient les bonnes valeurs.

Voici à quoi ressemble l'un des exemples d'instructions:

nouveau mq («m1», mqAry1,60);

• Le m1 est l'id de notre balise div qui affichera le chapiteau.
• mqAry1 est une référence à un tableau d'images qui seront affichées dans le rectangle de sélection.
• La valeur finale 60 est la largeur de nos images (les images défileront de droite à gauche et donc la hauteur est la même que celle définie dans la feuille de style).

Pour ajouter des chapiteaux supplémentaires, nous venons de configurer des tableaux d'images supplémentaires, des divisions supplémentaires dans notre HTML, éventuellement configurées des classes supplémentaires afin de styliser différemment les chapiteaux, et d'ajouter autant de nouvelles instructions mq () que nous en avons chapiteaux. Nous devons juste nous assurer que l'appel mqRotate () les suit pour faire fonctionner les chapiteaux pour nous.

Il n'y a que deux modifications que vous devez apporter afin de transformer les images du cadre en liens.

Tout d'abord, changez votre tableau d'images d'un tableau d'images en un tableau de tableaux où chacun des tableaux internes se compose d'une image en position 0 et de l'adresse du lien en position 1.

var mqAry1 = [
['graphics / img0.gif', 'blcmarquee1.htm'],
['graphics / img1.gif', 'blclockm1.htm'], ...
['graphics / img14.gif', 'bltypewriter.htm']];

La deuxième chose à faire est de substituer ce qui suit à la partie principale du script:

// Chapiteau d'image continue avec liens
// copyright 21 septembre 2008 par Stephen Chapman
// http://javascript.about.com
// l'autorisation d'utiliser ce Javascript sur votre page Web est accordée
// à condition que tout le code ci-dessous dans ce script (y compris ceux-ci
// commentaires) est utilisé sans aucune modification
var mqr = []; fonction mq (id, ary, wid) {this.mqo = document.getElementById (id); var heit = this.mqo.style.height; this.mqo.onmouseout = function () {mqRotate (mqr);}; this.mqo.onmouseover = function () {clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw = ary.length; pour (var i = 0; i -1; j--) {maxa = mqr [j] .ary.length; pour (var i = 0; i

Le reste de ce que vous devez faire reste le même que celui décrit pour la version du chapiteau sans les liens.