余志国网站设计工作室是专业从事义乌网站建设、义乌外贸网站建设、义乌网站制作、义乌网站设计的专业义乌网站建设工作室,是义乌外贸网站建设专家!

几行代码搞定FLASH动态切换图片效果

分类:网页设计 Tags: 评论:1 浏览:7867 最近更新时间: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

本文地址:https://www.yuzhiguo.com/327/
  • 相关文章
  • 推荐文章
  • 最新文章
发表评论





您的IP:18.215.161.19,来自:
無
: 很好的文章@@,謝謝 2010/1/26 16:04:40

留言

 


免费咨询
建站咨询热线
15967985565

扫一扫微信咨询
QQ: 358758308 Skype: yuzhiguo Facebook: yuzhiguo Email