20行JS代码实现图片切换效果

ye_jinghua · 发表于 2013-2-7 19:06:28

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS图片切换效果</title></head><style type="text/css">#oTransContainer{FILTER:progid:DXImageTransform.Microsoft.Wheel(duration=2,spokes=16),BlendTrans(duration=2),RevealTrans(duration=2,transition=23),progid:DXImageTransform.Microsoft.Wipe(duration=3,gradientsize=0.25,motion=reverse),progid:DXImageTransform.Microsoft.RadialWipe(duration=2,wipeStyle=CLOCK),progid:DXImageTransform.Microsoft.Slide(duration=2,bands=1,slideStyle=SWAP),progid:DXImageTransform.Microsoft.Spiral(duration=2,gridSizeX=50,gridSizeY=50),progid:DXImageTransform.Microsoft.RandomDissolve(duration=2),progid:DXImageTransform.Microsoft.Wheel(duration=2,spokes=16),progid:DXImageTransform.Microsoft.Stretch(duration=2,stretchStyle=PUSH),progid:DXImageTransform.Microsoft.GradientWipe(duration=2,gradientSize=0.25,motion=forward),progid:DXImageTransform.Microsoft.Fade(duration=2,overlap=0),progid:DXImageTransform.Microsoft.Pixelate(,enabled=false,duration=2,maxSquare=25),progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0,motion='forward');WIDTH: 780px;HEIGHT: 533px;}</style><body><div id="oTransContainer"> <div><img src="images/1.jpg"><a href="#">陈家祠1</a></div> <div><img src="images/2.jpg"><a href="#">陈家祠2</a></div> <div><img src="images/3.jpg"><a href="#">陈家祠3</a></div> <div><img src="images/4.jpg"><a href="#">陈家祠4</a></div> <div><img src="images/5.jpg"><a href="#">陈家祠5</a></div> <div><img src="images/6.jpg"><a href="#">陈家祠6</a></div></div><script type="text/javascript">var nowFrame = 0;function fnToggle() {varimgs=oTransContainer.getElementsByTagName("div");var j=(Math.floor(Math.random()*oTransContainer.filters.length))var filter=oTransContainer.filters[j];var maxFrame=parseInt(imgs.length);nowFrame++;if(nowFrame==maxFrame)nowFrame=0;filter.Apply();imgs[nowFrame].style.display = "block";filter.Play(duration = 2);for(var i=0;i<imgs.length;i++){if(i!=nowFrame)imgs[i].style.display = "none";}setTimeout("fnToggle()", 6000);}fnToggle();</script></body></html> JS图片切换效果超简单的实现;
附件中包含图片；

		自动登录	找回密码
密码			立即注册