教程集 > 脚本编程 > javascript > 正文 js 幻灯片效果

js 幻灯片效果

发布时间：2023-06-08 编辑：jiaochengji.com

教程集为您提供js 幻灯片效果等资源，欢迎您收藏本站，我们将为您提供最新的js 幻灯片效果资源

提示：您可以先修改部分代码再运行

<html>  <head>  <style>  #aa{position:relative;}  #aa img{position:absolute;top:0px;left:0px;filter:alpha(opacity=0);opacity:0;}  </style>  <script language="javascript">  var Slide=function(){  				return {		  					clarityDgree:0,  					opacityDgree:100,  					images:null,  					start:0,  					end:0,  					persistTime:3000,  					countLoop:null,  					opacityLoop:null,  					run:function(containerID,persistTime){  						//初始化images  						if(containerID)  						{  							this.images=document.getElementById(containerID).getElementsByTagName("img");  							this.end=this.images.length-1;  						}  						//覆盖默认停留时间  						if(persistTime)  						{  							this.persistTime=persistTime;	  						}  						//校验是否具有images属性值  						if(!this.images)  							throw "Can't find any images!";  						//从最第一张图开始渐显图片  						this.images[this.start].style.filter="alpha(opacity=" this.clarityDgree ")"  						this.images[this.start].style.opacity=this.clarityDgree/100;  						//渐隐当前焦点图片的前一张图片  						var temp=this.start==0 ? this.images.length-1 : this.start-1;  						this.images[temp].style.filter="alpha(opacity=" this.opacityDgree ")";  						this.images[temp].style.opacity=this.opacityDgree/100;  						//循环变量改变  						this.clarityDgree =1;  						this.opacityDgree-=1;  						//检查是否需要重复调用  						if(this.clarityDgree>100)  						{  							this.clarityDgree=0;  							this.opacityDgree=100;  							this.start==this.end ? this.start=0 :this.start =1;							  							this.countLoop=setTimeout("Slide.run()",this.persistTime);  						}  						else  							this.opacityLoop=setTimeout("Slide.run()",1);  					},  					pause:function(){  						if(this.opacityLoop)  							clearTimeout(this.opacityLoop);  						if(this.countLoop)  							clearTimeout(this.opacityLoop);  					}  				};  			}();  window.onload=function(){Slide.run("aa",1000)};  </script>  </head>  <body>  <div id="aa">  	<img id="aa2" src="" onmouseover=Slide.pause(); onmouseout=Slide.run();>  	<img id="aa3" src="" onmouseover=Slide.pause(); onmouseout=Slide.run();>  	<img id="aa2" src="" onmouseover=Slide.pause(); onmouseout=Slide.run();>  	<img id="aa3" src="" onmouseover=Slide.pause(); onmouseout=Slide.run();>  </div>   js 幻灯片效果   js 图片 幻灯片   js幻灯片代码  </body>  </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
jQuery幻灯片插件 Slides
jquery幻灯片特效banner切换实例
 jQuery幻灯片插件 SlidesJS
jQuery幻灯片播放 Slideshow2!
jQuery幻灯片放映插件 CrossSlide
jQuery 幻灯效果显示插件 Diapo
照片墙 Image Wall with jQuery
基于jquery的15款幻灯片插件
 jQuery图片幻灯手风琴效果插件 Slidorion
jQuery幻灯片插件 Skitter

上一篇：js控制图片下一篇：超漂亮的css控制图片效果

[关闭]

js 幻灯片效果

最近更新

浏览排行