我的一亩三分地 我就喜欢!
13fen  设为主页
 收藏本站
 
当前位置: > 一亩三分地:首页 > 网络学院 > 网页设计 > JS特效 > 网页中图片的随机显示
热门文章排行
热门文章排行 网页上传常见问题分析(11-24)
五彩缤纷建网页(一)(10-11)
五彩缤纷建网页(二)(10-11)
五彩缤纷建网页(三)(10-11)
五彩缤纷建网页(四)(10-11)
精采文章排行
精采文章排行 网页技巧二十例(11-13)
模仿QQ和MSN消息提示的效果(11-13)
根据分辨率不同调用不同的css文件(11-13)
Dreamweaver 基础 :DW的"文档"工具(11-01)
Dreamweaver 基础 :DW的"文档"窗口(11-01)
技术专题推荐
网管论坛交流
 

网页中图片的随机显示 

作者:佚名   来源:Linux 宝库   点击:   日期:2006-11-24


-->

    图片随机显示是一个应用非常广泛的技巧。比如随机banner的显示,当你进入一个网站时它的banner总是不同的,或者总有内容不同的提示(tips),大家在网上浏览时会经常发现这样的例子。使用这种技术,不但能在一定的空间里放入更多的内容,还可以给人一种经常更新的假象喔。


    怎么样心动了吧?其实只要你有一点点html和javascript 的基础,一切都是这么简单。follow me,让我们来看看她随机的奥密。


    让我们从一个简单的例子开始吧。平常我们在页面中加入图片都是用<img src="图片">来完成。如果我们要随机显示3张不同的图片就要对这句代码进行小小的修改,首先加入<script>标记:<script language=javascript></script>然后在这段标记内把<img src="图片">用document.write("")的型式放进去,就成了document.write("<img src=图片>")


    现在我们来完成最关建的一段:id=Math.round(Math.random()*2)+1这样取得随机数为1,2,3将你要显示的图片改名为1.gif,2.gif,3.gif,ok!最后的代码是:<script language=javascript> id=Math.round(Math.random()*2)+1 document.write("<img src="+id+".gif>")


    </script>试一下,是不是不错?那如果我的每一张图片都对应了一个超链接该怎么办呢?


    我们还是来假设一下有3张图片,1.gif,2.gif,3.gif,分别对应的链接是url1,url2,url3.为了让图片和链接一一对应,我们要设置一个数组image来放置链接的地址,如下:var image=new Array(3)


    image.length=3 image="url1" image="url2" image="url3"为了将与图片对应的链接取出来,我们还要定义一个数组imageurl=image[id]原理是这样的:当页面被读入时,取一个随机数,假设是2即id=2,那么如上我们可轻松的完成2.gif在页面的显示。然后我们可以看到:imageurl=image而image="url2",剩下的事就好办了。完整的代码如下:<script language=javascript> var image=new Array(3)


    image.length=3 image="url1" image="url2" image="url3" id=Math.round(Math.random()*2)+1 imageurl=image[id] document.write("<a href="+bannerurl+">"+"<img src="+id+".gif>")


    </script>这只是一个简单的例子,还有许多的功能可以实现,比如,设定图片的显示机率等。





文章评论】 【收藏本文】 【推荐好友】 【打印本文】 【论坛讨论

   相关文章:
·在状态栏中实现活动文字效果 ·DW+ASP玩转动态二级菜单
·鼠标事件的基础和完美实现 ·DW滑动菜单的制作
·网页里震动的效果怎么做 ·灵活运用DREAMWEAVER的SITE功能

   文章评论:(条)
  
 请留名: 匿名评论   点击查看所有评论 网管论坛
 

  责任编辑:一分  声明:刊登此文章是为了传递更多信息,文章内容仅供参考,转载请注明出处。