做网站经常要用到图片切换的效果,用FLASH做当然是可以的,只是不想那么麻烦,很早就找了段仿FLASH的图片动态切换代码,屡用不爽,代码内容也很简单,改起来也不难,怎么改就看我的说明了,下面的代码是4张图的动态切换效果,看代码:
<div id=oTransContainer style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward'); WIDTH: 400px; HEIGHT: 160px">
<img src="images/top1.jpg" name="oDIV1" class=pic id=oDIV1>
<script>var NowFrame = 1;var MaxFrame = 4;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>
<img class=pic id=oDIV2 src="images/top2.jpg" style="DISPLAY: none;">
<img class=pic id=oDIV3 src="images/top3.jpg" style="DISPLAY: none;">
<img class=pic id=oDIV4 src="images/top4.jpg" style="DISPLAY: none;">
</div>
代码说明:
width:400px;height:160px; 是设定div的宽高,和图片的宽高相同就可以;
images/top1.jpg,images/top2.jpg,images/top3.jpg,images.top4.jpg分别是各个图片的路径;如果增加了图片,odiv*的值也相应递增;
maxframe=4是说明有4张图片在切换;如果是8张就改成8;
6000代表的是时间;
如果想在图片上加链接那也容易,这样写就好了:
<a href="链接地址" target="_blank"> <img src="images/top1.jpg" name="oDIV1" class=pic id=oDIV1> </a>
其他的也没什么修改了
已试用，还不错。
======================
代码2：http://www.xdcs.com/blog/article.asp?id=251
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>很不错的图片切换效果</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="http://www.backley.net"
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"
height=150 src="myfile/picshow1/01.jpg"
width=778 border=0>
<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()', 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="http://www.backley.net"
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"
height=150 src="myfile/picshow1/02.jpg"
width=778 border=0></a><a
href="http://www.backley.net"
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"
height=150 src="myfile/picshow1/03.jpg"
width=778 border=0></a><a
href="http://www.backley.net"
target=_blank><img class=pic id=oDIV4
style="BORDER-RIGHT: white 1px solid; BORDER-TOP: white 1px solid; DISPLAY: none; BORDER-LEFT: white 1px solid; BORDER-BOTTOM: white 1px solid"
height=150 src="myfile/picshow1/04.jpg"
width=778 border=0></a><a
href="http://www.backley.net"
target=_blank><img class=pic id=oDIV5
style="BORDER-RIGHT: white 1px solid; BORDER-TOP: white 1px solid; DISPLAY: none; BORDER-LEFT: white 1px solid; BORDER-BOTTOM: white 1px solid"
height=150 src="myfile/picshow1/05.jpg"
width=778 border=0></a></div></td>
</tr>
</table>
</body>
</html>
=========================
代码3：http://www.webkkk.com/sygj/ggdm.htm （Very good，样式丰富）
代码4：http://www.webjx.com/htmldata/2005-10-01/1128143647.html
更多内容见email
浙公网安备 33010602011771号