<!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() {
var imgs=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>
<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() {
var imgs=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>
1515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
