CSS图片切换代码 ，可以自行定义切换方式
时间：2010-09-17 来源：吞吞吐吐
<script>
var NowFrame = 1;
var MaxFrame =5;
var bStart = 0;
function fnToggle() {
var next = NowFrame + 1;if(next == MaxFrame+1) {
NowFrame = MaxFrame;next = 1;}if(bStart == 0) {
bStart = 1;setTimeout('fnToggle()', 4000);return;
}
else {
oTransContainer.filters[0].Apply();document.images['oDIV'+next].style.display = "";
document.images['oDIV'+NowFrame].style.display = "none";oTransContainer.filters[0].Play(duration=2);
if(NowFrame == MaxFrame){NowFrame = 1;}else{NowFrame++;}
}
setTimeout('fnToggle()', 6000);//6000毫秒=6秒
}
fnToggle();
</script>
<style>
*{margin:0}
#oTransContainer{width:895px;HEIGHT:314px;overflow:hidden;}
.oBg{FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0,motion='forward');}/*css渐变样试*/
#oDiv1{display:block;}
#oDiv2,oDiv3,oDiv4,oDiv5{display:none;}
</style>
<div id="oTransContainer" class="oBg">
<a href=""><img id="oDIV1" src="images/home01.jpg" border="0" width="895" height="314" /></a>
<a href=""><img id="oDIV2" src="images/home02.jpg" border="0" width="895" height="314" /></a>
<a href=""><img id="oDIV3" src="images/home03.jpg" border="0" width="895" height="314" /></a>
<a href=""><img id="oDIV4" src="images/home04.jpg" border="0" width="895" height="314" /></a>
<a href=""><img id="oDIV5" src="images/home05.jpg" border="0" width="895" height="314" /></a>
</div>
.随机变换效果 progid:DXImageTransform.Microsoft.RevealTrans(enabled=ture,transition=23) 0.方形逐渐变小 progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=in) 交叉形逐渐变大 progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=out) 菱形逐渐变小 progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=in) 1.方形逐渐变大 progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=out) 交叉形逐渐变小 progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=in) 菱形逐渐变大 progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=out) 2.圆形逐渐变小 progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=in) 加号形逐渐变大 progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=out) 星形逐渐变小 progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=in) 3.圆形逐渐变大 progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=out) 加号形逐渐变小 progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=in) 星形逐渐变大 progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=out) 4.向上逐渐擦除 progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=up) 5.向下逐渐擦除 progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=down) 6.向左逐渐擦除 progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=left) 7.向右逐渐擦除 progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=right) 8.垂直百叶窗效果 progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=right) progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=left) progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=right) progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=left) 9.水平百叶窗效果 progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=down) progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=up) progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=down) progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=up) 10.横向棋盘效果 progid:DXImageTransform.Microsoft.CheckerBoard(direction=down,squaresX=12,squaresY=12) progid:DXImageTransform.Microsoft.CheckerBoard(direction=up,squaresX=12,squaresY=12) progid:DXImageTransform.Microsoft.Checkerboard(direction=down,squaresX=2,squaresY=2) progid:DXImageTransform.Microsoft.Checkerboard(direction=up,squaresX=2,squaresY=2) progid:DXImageTransform.Microsoft.Checkerboard(direction=down,squaresX=60,squaresY=60) progid:DXImageTransform.Microsoft.Checkerboard(direction=up,squaresX=60,squaresY=60) 11.纵向棋盘效果 progid:DXImageTransform.Microsoft.CheckerBoard(direction=right,squaresX=12,squaresY=12) progid:DXImageTransform.Microsoft.CheckerBoard(direction=left,squaresX=12,squaresY=12) progid:DXImageTransform.Microsoft.Checkerboard(direction=right,squaresX=2,squaresY=2) progid:DXImageTransform.Microsoft.Checkerboard(direction=left,squaresX=2,squaresY=2) progid:DXImageTransform.Microsoft.Checkerboard(direction=right,squaresX=60,squaresY=60) progid:DXImageTransform.Microsoft.Checkerboard(direction=left,squaresX=60,squaresY=60) 12.随机溶解效果 progid:DXImageTransform.Microsoft.RandomDissolve(enable=true) 13.左右向中部收缩 progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=vertical) 14.中部向左右展开 progid:DXImageTransform.Microsoft.Barn(motion=out,orientation=vertical) 15.上下向中部收缩 progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=horizontal) 16.中部向上下展开 progid:DXImageTransform.Microsoft.Barn(motion=out,orientation=horizontal) 17.阶梯状向左下展开 progid:DXImageTransform.Microsoft.Strips(motion=leftdown) 18.阶梯状向左上展开 progid:DXImageTransform.Microsoft.Strips(motion=leftup) 19.阶梯状向右下展开 progid:DXImageTransform.Microsoft.Strips(motion=rightdown) 20.阶梯状向右上展开 progid:DXImageTransform.Microsoft.Strips(motion=rightup) 21.随机水平线效果 progid:DXImageTransform.Microsoft.RandomBars(orientation=horizontal) 22.随机垂直线效果 progid:DXImageTransform.Microsoft.RandomBars(orientation=vertical) 24.标准渐变转化效果 BlendTrans(enabled=true,percent=10) 25.可调渐变转化效果 progid:DXImageTransform.Microsoft.Fade(enabled=ture,overlap=1.0) 26.向右下插入效果 progid:DXImageTransform.Microsoft.Inset(enabled=ture) 27.马赛克效果 progid:DXImageTransform.Microsoft.Pixelate(maxSquare=20) 28.时钟形射线擦除 progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=clock) 29.楔子形射线擦除 progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=wedge) 30.辐射形射线擦除 progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=radial) 31.隐藏式幻灯片效果 progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=1) progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=20) 32.推动式幻灯片效果 progid:DXImageTransform.Microsoft.Slide(slidestyle=push,bands=1) progid:DXImageTransform.Microsoft.Slide(slidestyle=push,bands=20) 33.交换式幻灯片效果 progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=1) progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=20) 34.螺旋形收缩效果 progid:DXImageTransform.Microsoft.Spiral(gridSizeX=20,gridSizeY=20) 35.隐藏式伸展效果 progid:DXImageTransform.Microsoft.Stretch(stretchstyle=hide) 36.推动式伸展效果 progid:DXImageTransform.Microsoft.Stretch(stretchstyle=push) 37.旋转式伸展效果 progid:DXImageTransform.Microsoft.Stretch(stretchstyle=spin) 38.风车轮转动效果 progid:DXImageTransform.Microsoft.Wheel(spokes=20) 39.梯度擦除效果 progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=forward) progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=reverse) progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=forward) progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=reverse) 40.Z字形曲折效果 progid:DXImageTransform.Microsoft.Zigzag(gridSizeX=20,gridSizeY=20)
相关阅读 更多 +
