Cet article décrit l'effet de jouer à tour de rôle des diaporamas en js. Partagez-le pour votre référence, comme suit:
<body> <Script Language = "JavaScript" type = "Text / JavaScript"> <! - / **************************************************** Nom: Image Carousel Class Time: 2010-07-11 Zhangty Exemple: il y a un nœud nommé Imgplayer (ou autre ID est OK) dans la page. Pimgplayer.additem ("test", "http://www.pomoho.com", "http://static.pomoho.com/static/samesong/images/logo5.jpg"); Pimgplayer.additem ("test2", "http://www.pomoho.com.cn", "http://static.pomoho.com/static/samesong/images/logo4.jpg"); Pimgplayer.additem ("test3", "http://www.pomoho.com.cn", "http://static.pomoho.com/static/samesong/images/logo3.jpg"); Pimgplayer.init ("imgplayer", 200, 230); Remarques: Convient pour les endroits où il n'y a qu'une seule image carrousel sur une page. ******************************************************* / var pimgplayer = {_timer: null, _Items: [], _Container: Null, _index: 0, _Imgs: [], Intervaltime: 5.5000, _index: _imgs: [], Intervaltime: 5000, //Dex function (objid, w, h, time) {this.intervaltime = time || this.intervaltime; this._Container = document.getElementById (objid); this._container.style.display = "bloc"; this._container.style.width = w + "px"; this._container.style.height = h + "px"; this._container.style.position = "relatif"; this._container.style.overflow = "Hidden"; //this._container.style.border = "1px solide #fff"; var linkstyle = "affichage: bloc; text-décoration: aucun;"; if (document.all) {linkstyle + = "filter:"; linkStyle + = "Progid: dximageTransform.microsoft.barn (durée = 0,5, motion = 'out', orientation = 'vertical')"; linkStyle + = "Progid: dximageTransform.microsoft.barn (durée = 0,5, motion = 'out', orientation = 'horizontal')"; linkStyle + = "Progid: dximageTransform.microsoft.blinds (durée = 0,5, bandes = 10, direction = 'down')"; linkStyle + = "Progid: dxiageTransform.microsoft.checkerboard ()"; linkStyle + = "Progid: dxiageTransform.microsoft.fade (durée = 0,5, chevauchement = 0)"; linkStyle + = "Progid: dxiageTransform.microsoft.gradientwipe (durée = 1, gradiedize = 1,0, motion = 'reverse')"; linkStyle + = "Progid: dxiageTransform.microsoft.inset ()"; linkstyle + = "Progid: dxiageTransform.microsoft.iris (durée = 1, iRisstyle = plus, motion = out)"; linkStyle + = "Progid: dxiageTransform.microsoft.iris (durée = 1, iRisstyle = plus, motion = in)"; linkstyle + = "Progid: dxiageTransform.microsoft.iris (durée = 1, irisstyle = diamant, mouvement = in)"; linkstyle + = "Progid: dxiageTransform.microsoft.iris (durée = 1, irisstyle = diamant, mouvement = in)"; linkStyle + = "Progid: dxiageTransform.microsoft.iris (durée = 1, iRisstyle = carré, motion = in)"; linkstyle + = "Progid: dxiageTransform.microsoft.iris (durée = 0,5, iRisstyle = star, motion = in)"; linkStyle + = "Progid: dxiageTransform.microsoft.radialwipe (durée = 0,5, wipeyle = horloge)"; linkStyle + = "Progid: dxiageTransform.microsoft.radialwipe (durée = 0,5, wipeyle = wedge)"; linkStyle + = "Progid: dxiageTransform.microsoft.radialwipe (durée = 0,5, wipeyle = wedge)"; linkStyle + = "Progid: dxiageTransform.microsoft.randombars (durée = 0,5, orientation = horizontal)"; linkStyle + = "Progid: dxiageTransform.microsoft.randombars (durée = 0,5, orientation = vertical)"; linkSTyle + = "Progid: dximageTransform.microsoft.randomDissolve ()"; linkStyle + = "Progid: dxiageTransform.microsoft.spiral (durée = 0,5, gridSizex = 16, gridSizey = 16)"; linkstyle + = "Progid: dxiageTransform.microsoft.stretch (durée = 0,5, stretchstyle = push)"; linkStyle + = "Progid: dximageTransform.microsoft.strips (durée = 0,5, mouvement = droite)"; linkStyle + = "PROGID: dxiageTransform.microsoft.wheel (durée = 0,5, rayons = 8)"; linkStyle + = "Progid: dxiageTransform.microsoft.zigzag (durée = 0,5, gridSizex = 4, gridSizey = 40); largeur: 100%; hauteur: 100%"; } // var ulstyle = "margin: 0; width:" + w + "px; position: absolu; z-index: 999; droite: 5px; filtre: alpha (opacity = 30, finadOpacity = 90, style = 1); overflow: Hidden; inférieur: -1px; hauteur: 16px; border-right: 1px solide #fff;";; "; // var listyle = "margin: 0; list-style-type: Aucun; margin: 0; padding: 0; float: right;"; // var baspacStyle = "Clear: les deux; affichage: bloc; largeur: 23px; line-height: 18px; font-size: 12px; font-family: '安'; opacité: 0,6;"; BasespacStyle + = "Border: 1px solide #fff; border-droite: 0; border-bottom: 0;"; BasespacStyle + = "Color: #fff; Text-Align: Centre; curseur: pointeur;"; // var ulhtml = ""; for (var i = this._items.length -1; i> = 0; i -) {var spanstyle = ""; if (i == this._index) {spanstyle = BasespacStyle + "Background: # ff0000;"; // Initialisez la couleur du nombre inférieur} else {spanstyle = BasespacStyle + "Background: # c0c0c0;"; // Initialisez la couleur d'arrière-plan du nombre inférieur} ulhtml + = "<li style = /" "+ listyle +" / ">"; ulhtml + = "<span onMouseOver = /" PimgPlayer.mouseOver (this); / "onMouseout = /" PimgPlayer.mouseout (this); / "style = /" + spanstyle + "/" onclick = / "pimgplayer.play (" + i + "); return false; /" herf = / "javascript :; this._items [i] .title + "/"> "+ (i + 1) +" </span> "; ulhtml + =" </li> ";} // var html =" <a href = / "" + this._items [this._index] .link + "/" title = / "+ this._items [this._index]. Target = / "_ Blank /" style = / "+ linkstyle +" / "> </a> <ul style = /" + ulstyle + "/"> "+ ulhtml +" </ul> "; this._container.innerhtml = html; var link = this._container.getElementsByTagName ("A") [0]; link.style.width = w + "px"; link.style.height = h + "px"; link.style.background = 'url (' + this._items [0] .img + ') sans répétition du centre du centre'; // this._timer = setInterval ("pimgplayer.play ()", this.intervaltime); }, addItem: function (_title, _link, _imgurl) {this._items.push ({title: _title, lien: _link, img: _imgurl}); var img = new image (); img.src = _imgurl; this._imgs.push (img); }, play: function (index) {if (index! = null) {this._index = index; ClearInterval (this._timer); this._timer = setInterval ("pimgplayer.play ()", this.intervaltime); } else {this._index = this._index <this._items.length-1? this._index + 1: 0; } var link = this._container.getElementsByTagName ("a") [0]; if (link.filters) {var ren = math.floor (math.random () * (link.filters.length)); link.filters [ren] .Apply (); link.filters [ren] .play (); } link.href = this._items [this._index] .link; link.title = this._items [this._index] .title; link.style.background = 'url (' + this._items [this._index] .img + ') sans répétition du centre du centre'; // var listyle = "margin: 0; list-style-type: Aucun; margin: 0; padding: 0; float: right;"; var basespacStyle = "Clear: les deux; affichage: bloc; largeur: 23px; height line-height: 18px; font-size: 12px; font-family: '安'; opacité: 0,6;"; BasespacStyle + = "Border: 1px solide #fff; border-droite: 0; border-bottom: 0;"; BasespacStyle + = "Color: #fff; Text-Align: Centre; curseur: pointeur;"; var ulhtml = ""; for (var i = this._items.length -1; i> = 0; i -) {var spanstyle = ""; if (i == this._index) {spanstyle = BasespacStyle + "Background: # ff0000;"; // Couleur des nombres} else {spanstyle = BasespacStyle + "Background: # C0C0C0;"; // Couleur d'arrière-plan des nombres} ulhtml + = "<li style = /" "+ listyle +" / ">"; ulhtml + = "<span onMouseOver = /" PimgPlayer.mouseOver (this); / "onMouseout = /" PimgPlayer.mouseout (this); / "style = /" + spanstyle + "/" onclick = / "pimgplayer.play (" + i + "); return false; /" herf = / "javascript :; this._items [i] .title + "/"> "+ (i + 1) +" </span> "; ulhtml + =" </li> ";} this._container.getElementsByTagName (" ul ") [0] .innerhtml = ulhtml;}, MouseOver: Fonction (obj) {var i = parseInt (Obj. ); "http://www.lashou.com/", "./images/1001.jpg"); "http://www.meituan.com/", "./images/1003.jpg");Pour plus d'informations sur le contenu lié à JavaScript, veuillez consulter les sujets de ce site: "Résumé des effets et techniques de commutation JavaScript", "Résumé des effets et techniques de recherche JavaScript", "Résumé des erreurs Javascript et des techniques de débogage" Algorithmes et techniques de traversée JavaScript ", et" Résumé de l'utilisation des opérations mathématiques JavaScript "
J'espère que cet article sera utile à la programmation JavaScript de tous.