几行代码搞定FLASH动态切换图片效果
分类：网页设计 Tags： 评论：1 浏览：8947 最近更新时间：2008/4/2 22:59:57
做网站经常要用到图片切换的效果,用FLASH做当然是可以的,只是不想那么麻烦,很早就找了段仿FLASH的图片动态切换代码,屡用不爽,看我的作品就会看到,有好几个网站都使用了这个效果;代码内容也很简单,改起来也不难,怎么改就看我的说明了,下面的代码是4张图的动态切换效果,我的很多客户都称它为FLASH动画,哈哈!看代码:
<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>
其他的也没什么修改了,看效果可以点下面的链接:
http://www.dyhaoshen.com.cn/about.asp
http://www.baolmrgj.com/about.asp
http://www.ydglasses.com/ydglasses/index.asp
-
• MSN、腾讯QQ、SKYPE、阿里旺旺网页在线客服源代码
• 如何设置网页方式直接浏览IIS网站日志.log文件
• 翻译、IP地址、手机号码归属、身份证信息、地图、天气、快递等API大全
• ASP生成农历日期程序代码，含年月日、星期、天干、地支、属相
• JavaScript自动替代错误图片代码
• google企业邮箱无缘无故被停用/谷歌企业邮箱莫名其妙被封
• 网页设计中HTML常范的几个错误，平常设计中需要注意了！
• JavaScript特效:实现上下文字、图片滚动循环显示,中间有停顿
• 支持支付宝付款的国外空间商
• Div+CSS网页布局入门实例教程四(图)
