1.JS代码
Code1
/**//**************************************************2
名称: 图片轮播类3
备注:适用于一个页面只有一个图片轮播的地方.4
***************************************************/5
var PImgPlayer = 
{6
_timer : null,7
_items : [],8
_container : null,9
_index : 0,10
_imgs : [],11
intervalTime : 5000, //轮播间隔时间12
init : function( objID, w, h, time ){13
this.intervalTime = time || this.intervalTime;14
this._container = document.getElementById( objID );15
this._container.style.display = "block";16
this._container.style.width = w + "px";17
this._container.style.height = h + "px";18
this._container.style.position = "relative";19
this._container.style.overflow = "hidden";20
//this._container.style.border = "1px solid #fff";21
var linkStyle = "display: block; TEXT-DECORATION: none;";22
if( document.all ){23
linkStyle += "FILTER:";24
linkStyle += "progid:DXImageTransform.Microsoft.Barn(duration=0.5, motion='out', orientation='vertical') ";25
linkStyle += "progid:DXImageTransform.Microsoft.Barn ( duration=0.5,motion='out',orientation='horizontal') ";26
linkStyle += "progid:DXImageTransform.Microsoft.Blinds ( duration=0.5,bands=10,Direction='down' )";27
linkStyle += "progid:DXImageTransform.Microsoft.CheckerBoard()";28
linkStyle += "progid:DXImageTransform.Microsoft.Fade(duration=0.5,overlap=0)";29
linkStyle += "progid:DXImageTransform.Microsoft.GradientWipe ( duration=1,gradientSize=1.0,motion='reverse' )";30
linkStyle += "progid:DXImageTransform.Microsoft.Inset ()";31
linkStyle += "progid:DXImageTransform.Microsoft.Iris ( duration=1,irisStyle=PLUS,motion=out )";32
linkStyle += "progid:DXImageTransform.Microsoft.Iris ( duration=1,irisStyle=PLUS,motion=in )";33
linkStyle += "progid:DXImageTransform.Microsoft.Iris ( duration=1,irisStyle=DIAMOND,motion=in )";34
linkStyle += "progid:DXImageTransform.Microsoft.Iris ( duration=1,irisStyle=SQUARE,motion=in )";35
linkStyle += "progid:DXImageTransform.Microsoft.Iris ( duration=0.5,irisStyle=STAR,motion=in )";36
linkStyle += "progid:DXImageTransform.Microsoft.RadialWipe ( duration=0.5,wipeStyle=CLOCK )";37
linkStyle += "progid:DXImageTransform.Microsoft.RadialWipe ( duration=0.5,wipeStyle=WEDGE )";38
linkStyle += "progid:DXImageTransform.Microsoft.RandomBars ( duration=0.5,orientation=horizontal )";39
linkStyle += "progid:DXImageTransform.Microsoft.RandomBars ( duration=0.5,orientation=vertical )";40
linkStyle += "progid:DXImageTransform.Microsoft.RandomDissolve ()";41
linkStyle += "progid:DXImageTransform.Microsoft.Spiral ( duration=0.5,gridSizeX=16,gridSizeY=16 )";42
linkStyle += "progid:DXImageTransform.Microsoft.Stretch ( duration=0.5,stretchStyle=PUSH )";43
linkStyle += "progid:DXImageTransform.Microsoft.Strips ( duration=0.5,motion=rightdown )";44
linkStyle += "progid:DXImageTransform.Microsoft.Wheel ( duration=0.5,spokes=8 )";45
linkStyle += "progid:DXImageTransform.Microsoft.Zigzag ( duration=0.5,gridSizeX=4,gridSizeY=40 ); width: 100%; height: 100%";46
}47
//48
var ulStyle = "margin:0;width:"+w+"px;position:absolute;z-index:999;right:5px;FILTER:Alpha(Opacity=30,FinishOpacity=90, Style=1);overflow: hidden;bottom:-1px;height:16px; border-right:1px solid #fff;";49
//50
var liStyle = "margin:0;list-style-type: none; margin:0;padding:0; float:right;";51
//52
var baseSpacStyle = "clear:both; display:block; width:23px;line-height:18px; font-size:12px; FONT-FAMILY:'宋体';opacity: 0.6;";53
baseSpacStyle += "border:1px solid #fff;border-right:0;border-bottom:0;";54
baseSpacStyle += "color:#fff;text-align:center; cursor:pointer; ";55
//56
var ulHTML = "";57
for(var i = this._items.length -1; i >= 0; i--){58
var spanStyle = "";59
if( i==this._index ){60
spanStyle = baseSpacStyle + "background:#ff0000;";61
} else {62
spanStyle = baseSpacStyle + "background:#000;";63
}64
ulHTML += "<li style=\""+liStyle+"\">";65
ulHTML += "<span onmouseover=\"PImgPlayer.mouseOver(this);\" onmouseout=\"PImgPlayer.mouseOut(this);\" style=\""+spanStyle+"\" onclick=\"PImgPlayer.play("+i+");return false;\" herf=\"javascript:;\" title=\"" + this._items[i].title + "\">" + (i+1) + "</span>";66
ulHTML += "</li>";67
}68
//69
var html = "<a href=\""+this._items[this._index].link+"\" title=\""+this._items[this._index].title+"\" target=\"_blank\" style=\""+linkStyle+"\"></a><ul style=\""+ulStyle+"\">"+ulHTML+"</ul>";70
this._container.innerHTML = html;71
var link = this._container.getElementsByTagName("A")[0];72
link.style.width = w + "px";73
link.style.height = h + "px";74
link.style.background = 'url(' + this._items[0].img + ') no-repeat center center';75
//76
this._timer = setInterval( "PImgPlayer.play()", this.intervalTime );77
},78
addItem : function( _title, _link, _imgURL ){79
this._items.push ( {title:_title, link:_link, img:_imgURL } );80
var img = new Image();81
img.src = _imgURL;82
this._imgs.push( img );83
},84
play : function( index ){85
if( index!=null ){86
this._index = index;87
clearInterval( this._timer );88
this._timer = setInterval( "PImgPlayer.play()", this.intervalTime );89
} else {90
this._index = this._index<this._items.length-1 ? this._index+1 : 0;91
}92
var link = this._container.getElementsByTagName("A")[0];93
if(link.filters){94
var ren = Math.floor(Math.random()*(link.filters.length));95
link.filters[ren].Apply();96
link.filters[ren].play();97
}98
link.href = this._items[this._index].link;99
link.title = this._items[this._index].title;100
link.style.background = 'url(' + this._items[this._index].img + ') no-repeat center center';101
//102
var liStyle = "margin:0;list-style-type: none; margin:0;padding:0; float:right;";103
var baseSpacStyle = "clear:both; display:block; width:23px;line-height:18px; font-size:12px; FONT-FAMILY:'宋体'; opacity: 0.6;";104
baseSpacStyle += "border:1px solid #fff;border-right:0;border-bottom:0;";105
baseSpacStyle += "color:#fff;text-align:center; cursor:pointer; ";106
var ulHTML = "";107
for(var i = this._items.length -1; i >= 0; i--){108
var spanStyle = "";109
if( i==this._index ){110
spanStyle = baseSpacStyle + "background:#ff0000;";111
} else {112
spanStyle = baseSpacStyle + "background:#000;";113
}114
ulHTML += "<li style=\""+liStyle+"\">";115
ulHTML += "<span onmouseover=\"PImgPlayer.mouseOver(this);\" onmouseout=\"PImgPlayer.mouseOut(this);\" style=\""+spanStyle+"\" onclick=\"PImgPlayer.play("+i+");return false;\" herf=\"javascript:;\" title=\"" + this._items[i].title + "\">" + (i+1) + "</span>";116
ulHTML += "</li>";117
}118
this._container.getElementsByTagName("UL")[0].innerHTML = ulHTML;119
},120
mouseOver : function(obj){121
var i = parseInt( obj.innerHTML );122
if( this._index!=i-1){123
obj.style.color = "#ff0000";124
}125
},126
mouseOut : function(obj){127
obj.style.color = "#fff";128
}129
}
2.在页面要播放的地方放入下面代码
<div id="imgADPlayer"></div>
3. 在页面body底部放入下面代码
Code1
<script>2
PImgPlayer.addItem( "AD1", "点击图片跳转至URL", "图片URL");3
PImgPlayer.addItem( "AD2", "点击图片跳转至URL", "图片URL");4
PImgPlayer.init( "imgADPlayer", 280, 160 );5
</script>6
浙公网安备 33010602011771号