网站地图
【www.gdgbn.com--js教程】
超简单js 图片轮换效果 <script>
/**************************************************
名称: 图片轮播类
备注:
适用于一个页面只有一个图片轮播的地方.
***************************************************/
var pimgplayer = {
_timer : null,
_items : [],
_container : null,
_index : 0,
_imgs : [],
intervaltime : 5000, //轮播间隔时间
init : function( objid, w, h, time ){
this.intervaltime = time || this.intervaltime;
this._container = document.getelementbyid( objid );
this._container.style.display = "block";
this._container.style.width = w + "px";
this._container.style.height = h + "px";
this._container.style.position = "relative";
this._container.style.overflow = "hidden";
//this._container.style.border = "1px solid #fff";
var linkstyle = "display: block; text-decoration: none;";
if( document.all ){
linkstyle += "filter:";
linkstyle += "progid:dximagetransform.microsoft.barn(duration=0.5, motion="out", orientation="vertical") ";
linkstyle += "progid:dximagetransform.microsoft.barn ( duration=0.5,motion="out",orientation="horizontal") ";
linkstyle += "progid:dximagetransform.microsoft.blinds ( duration=0.5,bands=10,direction="down" )";
linkstyle += "progid:dximagetransform.microsoft.checkerboard()";
linkstyle += "progid:dximagetransform.microsoft.fade(duration=0.5,overlap=0)";
linkstyle += "progid:dximagetransform.microsoft.gradientwipe ( duration=1,gradientsize=1.0,motion="reverse" )";
linkstyle += "progid:dximagetransform.microsoft.inset ()";
linkstyle += "progid:dximagetransform.microsoft.iris ( duration=1,irisstyle=plus,motion=out )";
linkstyle += "progid:dximagetransform.microsoft.iris ( duration=1,irisstyle=plus,motion=in )";
linkstyle += "progid:dximagetransform.microsoft.iris ( duration=1,irisstyle=diamond,motion=in )";
linkstyle += "progid:dximagetransform.microsoft.iris ( duration=1,irisstyle=square,motion=in )";
linkstyle += "progid:dximagetransform.microsoft.iris ( duration=0.5,irisstyle=star,motion=in )";
linkstyle += "progid:dximagetransform.microsoft.radialwipe ( duration=0.5,wipestyle=clock )";
linkstyle += "progid:dximagetransform.microsoft.radialwipe ( duration=0.5,wipestyle=wedge )";
linkstyle += "progid:dximagetransform.microsoft.randombars ( duration=0.5,orientation=horizontal )";
linkstyle += "progid:dximagetransform.microsoft.randombars ( duration=0.5,orientation=vertical )";
linkstyle += "progid:dximagetransform.microsoft.randomdissolve ()";
linkstyle += "progid:dximagetransform.microsoft.spiral ( duration=0.5,gridsizex=16,gridsizey=16 )";
linkstyle += "progid:dximagetransform.microsoft.stretch ( duration=0.5,stretchstyle=push )";
linkstyle += "progid:dximagetransform.microsoft.strips教程 ( duration=0.5,motion=rightdown )";
linkstyle += "progid:dximagetransform.microsoft.wheel ( duration=0.5,spokes=8 )";
linkstyle += "progid:dximagetransform.microsoft.zigzag ( duration=0.5,gridsizex=4,gridsizey=40 ); width: 100%; height: 100%";
}
//
var ulstyle = "margin:0;width:"+w+"px;position:absolute;z-index:999;right:5px;filter:alpha(opacity=50,finishopacity=50, style=1);overflow: hidden;bottom:-1px;height:16px; border-right:1px solid #fff;";
//
var listyle = "margin:0;list-style-type: none; margin:0;padding: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(var i = this._items.length -1; i >= 0; i--){
var spanstyle = "";
if( i==this._index ){
spanstyle = basespacstyle + "background:#ff0000;";
} else {
spanstyle = basespacstyle + "background:#000;";
}
ulhtml += "";
ulhtml += "" + (i+1) + "";
ulhtml += "";
}
//
var html = ""+ulhtml+"";
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}
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 = "margin:0;list-style-type: none; margin:0;padding: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(var i = this._items.length -1; i >= 0; i--){
var spanstyle = "";
if( i==this._index ){
spanstyle = basespacstyle + "background:#ff0000;";
} else {
spanstyle = basespacstyle + "background:#000;";
}
ulhtml += "- ";
ulhtml += "" + (i+1) + "";
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";
}
}
</script>
<script>
pimgplayer.additem( "", "http://down.111cn.net/parallel-studio/index.html", "images/12.jpg");
pimgplayer.additem( "", "http://down.111cn.net/is_2010/is-floating.html", "images/08.jpg");
pimgplayer.additem( "", "http://down.111cn.net/s_register.asp?plan_id=24", "images/10.jpg");
pimgplayer.additem( "", "http://down.111cn.net/is-training/installshield-training-tc.html", "images/05.jpg");
pimgplayer.additem( "", "http://down.111cn.net/", "images/01.jpg");
pimgplayer.init( "imgadplayer", 732, 220 );
</script>