Este artículo describe el efecto de tomar turnos jugando en las presentaciones de diapositivas en JS. Compártelo para su referencia, como sigue:
<Body> <script language = "javascript" type = "text/javascript"> <!-/********************************************************************************** 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); Notas: Adecuado para lugares donde solo hay un carrusel de imagen en una página. ***************************************************************/var pimgplayer = {_Timer: null, _items: [], _container: null, _index: 0, _imgs: [], tiempo de intervalos: función (objid, w, h, tiempo) {this.intervaltime = time || this.intervaltime; this._container = document.getElementById (objid); this._container.style.display = "bloque"; 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: None;"; if (document.all) {LinkStyle += "Filter:"; linkstyle += "progid: dximagetransform.microsoft.barn (duración = 0.5, movimiento = 'out', orientación = 'vertical')"; LinkStyle += "Progid: dximagetransform.microsoft.barn (duración = 0.5, movimiento = 'out', orientación = 'horizontal')"; LinkStyle += "Progid: dximagetransform.microsoft.blinds (duración = 0.5, bandas = 10, dirección = 'down')"; linkstyle += "progid: dximagetransform.microsoft.eckerboard ()"; LinkStyle += "Progid: dximagetransform.microsoft.fade (duración = 0.5, superposición = 0)"; LinkStyle += "Progid: dximagetransform.microsoft.gradientwipe (duración = 1, gradiente = 1.0, movimiento = 'reversa')"; linkstyle += "progid: dximagetransform.microsoft.inset ()"; LinkStyle += "Progid: dximagetransform.microsoft.iris (duración = 1, irisStyle = plus, movimiento = out)"; linkstyle += "progid: dximagetransform.microsoft.iris (duración = 1, irisStyle = plus, movimiento = in)"; linkstyle += "progid: dximagetransform.microsoft.iris (duración = 1, irisStyle = diamond, movimiento = in)"; linkstyle += "progid: dximagetransform.microsoft.iris (duración = 1, irisStyle = diamond, movimiento = in)"; LinkStyle += "Progid: dximagetransform.microsoft.iris (duración = 1, irisStyle = square, movimiento = in)"; LinkStyle += "Progid: dximagetransform.microsoft.iris (duración = 0.5, irisStyle = star, movimiento = in)"; LinkStyle += "Progid: dximagetransform.microsoft.radialwipe (duración = 0.5, wipestyle = reloj)"; LinkStyle += "Progid: dximagetransform.microsoft.radialwipe (duración = 0.5, wipestyle = cuña)"; LinkStyle += "Progid: dximagetransform.microsoft.radialwipe (duración = 0.5, wipestyle = cuña)"; LinkStyle += "Progid: dximagetransform.microsoft.randombars (duración = 0.5, orientación = horizontal)"; LinkStyle += "Progid: dximagetransform.microsoft.randombars (duración = 0.5, orientación = vertical)"; linkstyle += "progid: dximagetransform.microsoft.randomdissolve ()"; LinkStyle += "Progid: Dximagetransform.Microsoft.Spiral (Duración = 0.5, GridSizEx = 16, GridSizey = 16)"; linkstyle += "progid: dximagetransform.microsoft.stretch (duración = 0.5, estiramiento = push)"; LinkStyle += "Progid: dximagetransform.microsoft.strips (duración = 0.5, movimiento = derechista)"; LinkStyle += "Progid: dximagetransform.microsoft.wheel (duración = 0.5, radios = 8)"; LinkStyle += "Progid: dximagetransform.microsoft.zigzag (duración = 0.5, gridSizex = 4, gridSizey = 40); ancho: 100%; altura: 100%"; } // var ulstyle = "margin: 0; ancho:"+w+"px; posición: absoluto; z-odex: 999; derecha: 5px; filtro: alfa (opacidad = 30, metaPacity = 90, style = 1); Overflow: Hidden; fondo: -1px; altura: 16px; border-right: 1px sólido #fff;"; ";"; ";"; ";"; "; // var listyle = "margen: 0; tipo de estilo list: ninguno; margen: 0; relleno: 0; float: right;"; // var basespacStyle = "claro: ambos; pantalla: bloque; ancho: 23px; line-height: 18px; font-size: 12px; font-familia: '安'; opacidad: 0.6;"; BaseSpacStyle += "Border: 1px Solid #FFF; Border-Right: 0; Border-Bottom: 0;"; BaseSpacStyle += "Color: #fff; Text-Align: Center; Cursor: Pointer;"; // var ulhtml = ""; for (var i = this._items.length -1; i> = 0; i-) {var spanStyle = ""; if (i == this._index) {spanStyle = BaseSpacStyle + "Background:#FF0000;"; // Inicializar el color del número inferior} else {spanStyle = BaseSpacStyle + "Fondo:#C0C0C0;"; // Inicializar el color de fondo del número inferior} 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 + ') No-Repeat Center Center'; // this._timer = setInterval ("pimgplayer.play ()", this.intervaltime); }, addItem: function (_title, _link, _imgurl) {this._items.push ({title: _title, link: _link, img: _imgurl}); var img = nueva imagen (); 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-Repeat Center Center'; // var listyle = "margen: 0; tipo de estilo list: ninguno; margen: 0; relleno: 0; float: right;"; var basespacStyle = "claro: ambos; pantalla: bloque; ancho: 23px; line-height: 18px; font-size: 12px; fuente-familia: '安'; opacidad: 0.6;"; BaseSpacStyle += "Border: 1px Solid #FFF; Border-Right: 0; Border-Bottom: 0;"; BaseSpacStyle += "Color: #fff; Text-Align: Center; Cursor: Pointer;"; var ulhtml = ""; for (var i = this._items.length -1; i> = 0; i-) {var spanStyle = ""; if (i == this._index) {spanStyle = BaseSpacStyle + "Background:#FF0000;"; // Color de números} else {spanStyle = BaseSpacStyle + "Fondo:#C0C0C0;"; // Color de fondo de números} 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;}, rouseover: function (obj) {var i = parseint (obj. ); "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 y técnicas de recorrido ", y" Resumen del uso de operaciones matemáticas de JavaScript "
Espero que este artículo sea útil para la programación de JavaScript de todos.