本文实例讲述了JS实现的多张图片轮流播放幻灯片效果。分享给大家供大家参考,具体如下:
= 0; i--){
var spanStyle = "";
if( i==this._index ){
spanStyle = baseSpacStyle + "background:#ff0000;"; //初始化底部数字的颜色
} else {
spanStyle = baseSpacStyle + "background:#c0c0c0;"; //初始化底部数字的背景颜色
}
ulHTML += "SEOver=\"PImgPlayer.mouSEOver(this);\" onmouSEOut=\"PImgPlayer.mouSEOut(this);\" style=\""+spanStyle+"\" onclick=\"PImgPlayer.play("+i+");return false;\" herf=\"javascript:;\" title=\"" + this._items[i].title + "\">" + (i+1) + "";
ulHTML += " ";
}
//
var html = "
- ";
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 = 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
- "; ulHTML += " "; } this._container.getElementsByTagName("UL")[0].innerHTML = ulHTML; },mouseOver : function(obj){ var i = parseInt( obj.innerHTML ); if( this._index!=i-1){ obj.style.color = "#ff0000"; } },mouseOut : function(obj){ obj.style.color = "#fff"; } } -->