Este artigo descreve o efeito de revezar as apresentações de slides no JS. Compartilhe -o para sua referência, como segue:
<Body> <script linguagem = "javascript" type = "text/javascript"> <!-/************************************************************ Nome: Imagem Classe de carrossel Tempo de criação: 2010-07-11 Zhangty Exemplo: é um nó chamado imgplayer (ou outro idi. Pimgplayer.additem ("teste", "http://www.pomoho.com", "http://static.pomoho.com/static/sameng/images/logo5.jpg"); Pimgplayer.additem ("test2", "http://www.pomoho.com.cn", "http://static.pomoho.com/static/sameng/images/logo4.jpg"); Pimgplayer.additem ("test3", "http://www.pomoho.com.cn", "http://static.pomoho.com/static/sameng/images/logo3.jpg"); Pimgplayer.init ("imgplayer", 200, 230); Notas: Adequado para lugares onde há apenas uma imagem carrossel em uma página. função (objid, w, h, tempo) {this.intervaltime = time || this.intervalTime; this._container = document.getElementById (objid); this._container.style.display = "bloco"; this._container.style.width = w + "px"; this._container.style.Height = h + "px"; this._container.style.Position = "relativo"; this._container.style.overflow = "Hidden"; //this._container.style.border = "1px sólido #fff"; var linkStyle = "Display: Block; Text-Decoration: Nenhum;"; if (document.all) {linkStyle += "filtro:"; linkStyle += "progid: dximageTransform.microsoft.barn (duração = 0,5, movimento = 'out', orientação = 'vertical')"; linkStyle += "progid: dximageTransform.microsoft.barn (duração = 0,5, movimento = 'out', orientação = 'horizontal')"; linkStyle += "progid: dxxETransform.microsoft.blinds (duração = 0,5, bandas = 10, direção = 'down')"; linkStyle += "progid: dximageTransform.microsoft.checkerboard ()"; linkStyle += "progid: dIMAGETRANSForm.microsoft.fade (duração = 0,5, sobreposição = 0)"; linkStyle += "progid: dximageTransform.microsoft.gradientwipe (duração = 1, gradientize = 1.0, movy = 'reverse')"; linkStyle += "progid: dximageTransform.microsoft.inset ()"; linkStyle += "progid: dximageTransform.microsoft.iris (duração = 1, irisstyle = plus, movimento = out)"; linkStyle += "progid: dximageTransform.microsoft.iris (duração = 1, irisstyle = plus, movimento = in)"; linkStyle += "progid: dxxETransform.microsoft.iris (duração = 1, irisstyle = diamante, movimento = in)"; linkStyle += "progid: dxxETransform.microsoft.iris (duração = 1, irisstyle = diamante, movimento = in)"; linkStyle += "progid: dxxETransform.microsoft.iris (duração = 1, irisstyle = quadrado, movimento = in)"; linkStyle += "progid: dximageTransform.microsoft.iris (duração = 0,5, irisstyle = estrela, movimento = in)"; linkStyle += "progid: dximageTransform.microsoft.RadialWipe (duração = 0,5, wipestyle = relógio)"; linkStyle += "progid: dximageTransform.microsoft.RadialWipe (duração = 0,5, wipestyle = wedge)"; linkStyle += "progid: dximageTransform.microsoft.RadialWipe (duração = 0,5, wipestyle = wedge)"; linkStyle += "progid: dximageTransform.microsoft.randombars (duração = 0,5, orientação = horizontal)"; linkStyle += "progid: dxxETransform.microsoft.randombars (duração = 0,5, orientação = vertical)"; linkStyle += "progid: dximageTransform.microsoft.randomdissolve ()"; linkStyle += "progid: dximageTransform.microsoft.spiral (duração = 0,5, gridsizex = 16, gridsizey = 16)"; linkStyle += "progid: dximageTransform.microsoft.stretch (duração = 0,5, esticador = push)"; linkStyle += "progid: dIMAGETRANSForm.microsoft.strips (duração = 0,5, movimento = remonta)"; linkStyle += "progid: dIMAGETRANSForm.microsoft.wheel (duração = 0,5, raios = 8)"; linkStyle += "progid: dximageTransform.microsoft.zigzag (duração = 0,5, gridsizex = 4, gridsizey = 40); largura: 100%; altura: 100%"; } // var ulstyle = "margem: 0; largura:"+w+"px; posição: absoluto; z-index: 999; direita: 5px; filtro: alfa (opacidade = 30, finalizaPacity = 90, estilo = 1); superação: hidden; inferior: -1px; altura; 16px; borda-right: 1px; // var listyle = "margem: 0; tipo de lista de listos: nenhum; margem: 0; preenchimento: 0; float: direita;"; // var basespacstyle = "claro: ambos; exibição: bloco; largura: 23px; altura da linha: 18px; tamanho da fonte: 12px; font-família: '' '; opacidade: 0,6;"; basespacstyle += "borda: 1px sólido #fff; borda-direita: 0; borda-fundo: 0;"; BasespacStyle += "Cor: #FFF; Text-Align: Center; Cursor: Pointer;"; // var ulthtml = ""; for (var i = this._items.length -1; i> = 0; i-) {var spanStyle = ""; if (i == this._index) {SpanStyle = BasespacStyle + "Background:#FF0000;"; // inicialize a cor do número inferior} else {spanStyle = BasespacStyle + "Antecedentes:#C0C0C0;"; // Inicialize a cor de fundo do número inferior} ultml+= "<estilo li =/" "+listyle+"/">"; ultml+= "<span onMouseOver =/" pimgplayer.mouseOver (this);/"onMouseOut =/" pimgplayer.mouseout (this);/"style =/"+spanStyle+"/" onclick =/"pimgPlayer.Play ("+i+"); this._items [i] .title+"/"> "+(i+1)+" </span> "; ultml+=" </li> ";} // var html =" <a href =/""+this._items [this._index] .link+"/" =/" Target =/"_ Blank/" Style =/"+LinkStyle+"/"> </a> <Ul Style =/"+Ulstyle+"/"> "+Ultml+" </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 + ') no centro central de repetição'; // this._timer = setInterval ("pimgplayer.play ()", this.intervaltime); }, addItem: function (_title, _link, _imgurl) {this._items.push ({title: _title, link: _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 + ') no centro de repetição'; // var listyle = "margem: 0; tipo de lista de listos: nenhum; margem: 0; preenchimento: 0; float: direita;"; var basespacStyle = "Limpar: ambos; display: bloco; largura: 23px; altura da linha: 18px; tamanho da fonte: 12px; família da fonte: '' '; opacidade: 0,6;"; basespacstyle += "borda: 1px sólido #fff; borda-direita: 0; borda-fundo: 0;"; BasespacStyle += "Cor: #FFF; Text-Align: Center; Cursor: Pointer;"; var ulthtml = ""; for (var i = this._items.length -1; i> = 0; i-) {var spanStyle = ""; if (i == this._index) {SpanStyle = BasespacStyle + "Background:#FF0000;"; // cor dos números} else {spanStyle = basespacstyle + "Antecedentes:#c0c0c0;"; // cor de fundo dos números} ultml+= "<estilo li =/" "+listyle+"/">"; ultml+= "<span onMouseOver =/" pimgplayer.mouseOver (this);/"onMouseOut =/" pimgplayer.mouseout (this);/"style =/"+spanStyle+"/" onclick =/"pimgPlayer.Play ("+i+"); this._items [i] .title + "/"> " + (i + 1) +" </span> "; ultml + =" </li> ";} this._container.getElementsByTagName (" Ul ") [0] .innerhtml = ultml; ); "Lashou.com", "http://www.lashou.com/", "./images/1001.jpg"); "http://www.meituan.com/", "./images/1003.jpg");For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of Javascript Algoritmos e Técnicas de Traversal "e" Resumo do Uso do Javascript Mathematic Operations "
Espero que este artigo seja útil para a programação JavaScript de todos.