您的位置：首页 > Web前端 > JavaScript

JS由左向右的图片渐变过渡切换效果

2013-09-05 17:04 501 查看

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS由左向右的图片渐变过渡切换效果</title>
</head>
<body>
<table width="778" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td><div id=oTransContainer
style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0, wipeStyle=0, motion='forward'); WIDTH: 165px; HEIGHT: 103px">
<a href="/" target=_blank>
<img class=pic id=oDIV1
style="BORDER-RIGHT: white 1px solid; BORDER-TOP: white 1px solid; BORDER-LEFT: white 1px solid; BORDER-BOTTOM: white 1px solid"
src="/images/m01.jpg" border=0>
<script>
var NowFrame = 1;
var MaxFrame = 3;
var bStart = 0;
function fnToggle(){
var next = NowFrame + 1;
if(next == MaxFrame+1) {
NowFrame = MaxFrame;
next = 1;
}
if(bStart == 0){
bStart = 1;
setTimeout('fnToggle()',2000);
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);
}
fnToggle();
</script>
</a><a href="/" target=_blank><img class=pic id=oDIV2
style="BORDER-RIGHT: white 1px solid; BORDER-TOP: white 1px solid; DISPLAY: none; BORDER-LEFT: white 1px solid; BORDER-BOTTOM: white 1px solid"
src="/images/m02.jpg" border=0></a><a href="/" target=_blank><img
class=pic id=oDIV3
style="BORDER-RIGHT: white 1px solid; BORDER-TOP: white 1px solid; DISPLAY: none; BORDER-LEFT: white 1px solid; BORDER-BOTTOM: white 1px solid"
src="/images/m03.jpg" border=0></a>
</div></td>
</tr>
</table>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航