《JS实现的多张图片轮番播放幻灯片效果_.docx》由会员分享，可在线阅读，更多相关《JS实现的多张图片轮番播放幻灯片效果_.docx（6页珍藏版）》请在三一文库上搜索。
1、JS实现的多张图片轮番播放幻灯片效果_ 本文实例讲解并描述了JS实现的多张图片轮番播放幻灯片效果。分享给大家供大家参考，具体如下： body style=width: 715px; height: 95px; script language=javascript type=text/javascript !- /* 名称: 图片轮播类 创建时间: 2021-07-11 zhangty 示例: 页面中已经存在名为imgPlayer(或者别的ID也行)的节点. PImgPlayer.addItem( test, l = a href=+this._itemsthis._index.link+ ti
2、tle=+this._itemsthis._index.title+ target=_blank style=+linkStyle+/aul 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._items0.img + ) no-repea
3、t 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 = new Image(); img.src = _imgURL; this._imgs.push( img ); , play : function( index ) if( index!=nul
4、l ) this._index = index; clearInterval( this._timer ); this._timer = setInterval( PImgPlayer.play(), this.intervalTime ); else this._index = this._indexthis._items.length-1 ? this._index+1 : 0; var link = this._container.getElementsByTagName(A)0; if(link.filters) var ren = Math.floor(Math.random()*(
5、link.filters.length); link.filtersren.Apply(); link.filtersren.play(); link.href = this._itemsthis._index.link; link.title = this._itemsthis._index.title; link.style.background = url( + this._itemsthis._index.img + ) no-repeat center center; / var liStyle = margin:0;list-style-type: none; margin:0;p
6、adding:0; float:right; var baseSpacStyle = clear:both; display:block; width:23px;line-height:18px; font-size:12px; FONT-FAMILY:宋体; opacity: 0.6; baseSpacStyle += border:1px solid #fff;border-right:0;border-bottom:0; baseSpacStyle += color:#fff;text-align:center; cursor:pointer; ; var ulHTML = ; for(
7、var i = this._items.length -1; i = 0; i-) var spanStyle = ; if( i=this._index ) spanStyle = baseSpacStyle + background:#ff0000; /数字的颜色 else spanStyle = baseSpacStyle + background:#c0c0c0; /数字的背景颜色 ulHTML += li style=+liStyle+; ulHTML += span onmouseover=PImgPlayer.mouseOver(this); onmouseout=PImgPla
8、yer.mouseOut(this); style=+spanStyle+ onclick=PImgPlayer.play(+i+);return false; herf=javascript:; title= + this._itemsi.title + + (i+1) + /span; ulHTML += /li; this._container.getElementsByTagName(UL)0.innerHTML = ulHTML; , mouseOver : function(obj) var i = parseInt( obj.innerHTML ); if( this._inde
9、x!=i-1) obj.style.color = #ff0000; , mouseOut : function(obj) obj.style.color = #fff; - /script div id=imgADPlayer/div script PImgPlayer.addItem( 拉手网, http:/ ./images/1001.jpg); PImgPlayer.addItem( 糯米网, http:/ ./images/1002.jpg); PImgPlayer.addItem( 美团网, http:/ ./images/1003.jpg); PImgPlayer.init( imgADPlayer, 715, 95 ); /script /body 盼望本文所述对大家JavaScript程序设计有所关心。 .