JS实现的多张图片轮流播放幻灯片效果
本文实例讲述了JS实现的多张图片轮流播放幻灯片效果。分享给大家供大家参考，具体如下：
<bodystyle="width:715px;height:95px;">
<scriptlanguage="javascript"type="text/javascript">
<!--
/**************************************************
名称:图片轮播类
创建时间:2010-07-11zhangty
示例:
页面中已经存在名为imgPlayer(或者别的ID也行)的节点.
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);
备注:
适用于一个页面只有一个图片轮播的地方.
***************************************************/
varPImgPlayer={
_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="1pxsolid#fff";
varlinkStyle="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%";
}
//
varulStyle="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:1pxsolid#fff;";
//
varliStyle="margin:0;list-style-type:none;margin:0;padding:0;float:right;";
//
varbaseSpacStyle="clear:both;display:block;width:23px;line-height:18px;font-size:12px;FONT-FAMILY:'宋体';opacity:0.6;";
baseSpacStyle+="border:1pxsolid#fff;border-right:0;border-bottom:0;";
baseSpacStyle+="color:#fff;text-align:center;cursor:pointer;";
//
varulHTML="";
for(vari=this._items.length-1;i>=0;i--){
varspanStyle="";
if(i==this._index){
spanStyle=baseSpacStyle+"background:#ff0000;";//初始化底部数字的颜色
}else{
spanStyle=baseSpacStyle+"background:#c0c0c0;";//初始化底部数字的背景颜色
}
ulHTML+="<listyle=\""+liStyle+"\">";
ulHTML+="<spanonmouseover=\"PImgPlayer.mouseOver(this);\"onmouseout=\"PImgPlayer.mouseOut(this);\"style=\""+spanStyle+"\"onclick=\"PImgPlayer.play("+i+");returnfalse;\"herf=\"javascript:;\"title=\""+this._items[i].title+"\">"+(i+1)+"</span>";
ulHTML+="</li>";
}
//
varhtml="<ahref=\""+this._items[this._index].link+"\"title=\""+this._items[this._index].title+"\"target=\"_blank\"style=\""+linkStyle+"\"></a><ulstyle=\""+ulStyle+"\">"+ulHTML+"</ul>";
this._container.innerHTML=html;
varlink=this._container.getElementsByTagName("A")[0];
link.style.width=w+"px";
link.style.height=h+"px";
link.style.background='url('+this._items[0].img+')no-repeatcentercenter';
//
this._timer=setInterval("PImgPlayer.play()",this.intervalTime);
},
addItem:function(_title,_link,_imgURL){
this._items.push({title:_title,link:_link,img:_imgURL});
varimg=newImage();
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;
}
varlink=this._container.getElementsByTagName("A")[0];
if(link.filters){
varren=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-repeatcentercenter';
//
varliStyle="margin:0;list-style-type:none;margin:0;padding:0;float:right;";
varbaseSpacStyle="clear:both;display:block;width:23px;line-height:18px;font-size:12px;FONT-FAMILY:'宋体';opacity:0.6;";
baseSpacStyle+="border:1pxsolid#fff;border-right:0;border-bottom:0;";
baseSpacStyle+="color:#fff;text-align:center;cursor:pointer;";
varulHTML="";
for(vari=this._items.length-1;i>=0;i--){
varspanStyle="";
if(i==this._index){
spanStyle=baseSpacStyle+"background:#ff0000;";//数字的颜色
}else{
spanStyle=baseSpacStyle+"background:#c0c0c0;";//数字的背景颜色
}
ulHTML+="<listyle=\""+liStyle+"\">";
ulHTML+="<spanonmouseover=\"PImgPlayer.mouseOver(this);\"onmouseout=\"PImgPlayer.mouseOut(this);\"style=\""+spanStyle+"\"onclick=\"PImgPlayer.play("+i+");returnfalse;\"herf=\"javascript:;\"title=\""+this._items[i].title+"\">"+(i+1)+"</span>";
ulHTML+="</li>";
}
this._container.getElementsByTagName("UL")[0].innerHTML=ulHTML;
},
mouseOver:function(obj){
vari=parseInt(obj.innerHTML);
if(this._index!=i-1){
obj.style.color="#ff0000";
}
},
mouseOut:function(obj){
obj.style.color="#fff";
}
}
-->
</script>
<divid="imgADPlayer"></div>
<script>
PImgPlayer.addItem("拉手网","http://www.lashou.com/","./images/1001.jpg");
PImgPlayer.addItem("糯米网","http://www.nuomi.com/","./images/1002.jpg");
PImgPlayer.addItem("美团网","http://www.meituan.com/","./images/1003.jpg");
PImgPlayer.init("imgADPlayer",715,95);
</script>
</body>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。