站内搜索: 请输入搜索关键词

当前页面: 开发资料首页Javascript 专题随机显示图片

随机显示图片

摘要: 随机显示图片
不少网友发E-mail问我:“怎么每次去你的主页,看到的图片都不一样,难道你时时刻刻都在更换图片吗?”天啊,我哪有那么多钱支付电话费?我只不过用了JavaScript的小技巧做了个“随机图片”而已。其HTML源代码为:
  
  <script language=″JavaScript″>
    imglink=new Date();
  var thisimg=″1.jpg″;
  if(imglink.getSeconds()<54){var thisimg=″2.jpg″;}
  if(imglink.getSeconds()<46){var thisimg=″3.jpg″;}
  if(imglink.getSeconds()<39){var thisimg=″4.jpg″;}
  if(imglink.getSeconds()<32){var thisimg=″5.jpg″;}
  if(imglink.getSeconds()<24){var thisimg=″6.jpg″;}
  if(imglink.getSeconds()<17){var thisimg=″7.jpg″;}
  if(imglink.getSeconds()<9){var thisimg=″8.jpg″;}
  document.write(″″);
  //-->
  </script>
  
  在这个例子中,设置了8张图片,与网页放置于同一目录下。当浏览器打开此网页时,立即从电脑里读取时间,并根据秒数的不同选择不同的图片。
  我们也常常埋怨在网页里插入的图片与网页背景不能很好地融合在一起,如果图片周围有一圈朦胧的过渡色该多好!用Photoshop制作图片当然能实现这个效果。其实还有更好的办法:在网页中用 CSS 滤镜来实现!
  

(Color=#FFFFFF,Strength=36);height:auto;position:relative;padding:21pt″>
  
  


  其中,“Color=#FFFFFF”是定义阴影的颜色,“Strength=36”是定义阴影宽度。怎么样,图片是不是有了“月朦胧,鸟朦胧”的感觉?
  如果你不喜欢“温馨浪漫”的主页类型,这里还有一款“魔幻豪放”派的——
  在<head></head>中加入以下内容:
  
  <script language=″JavaScript″>
    function RandomNumber(max) //定义随机函数
  {var today=new Date();
  var num=Math.round((Math.abs(Math.sin(today.getTime()))*1000))%max+1;return num;}
  function makearray(n)
  {this.length=0;for(var i=1;i  {clearTimeout();
  linkarray=new makearray(10); //用linkarray数组定义十种常用颜色
  linkarray[1]=″#ff0000″;
  linkarray[2]=″#ffff00″;
  linkarray[3]=″#00ff00″;
  linkarray[4]=″#0000ff″;
  linkarray[5]=″#8000ff″;
  linkarray[6]=″#ff00ff″;
  linkarray[7]=″#004000″;
  linkarray[8]=″#808000″;
  linkarray[9]=″#ff8000″;
  linkarray[10]=″#ff0000″;
  document.bgColor=(linkarray[RandomNumber(10)]); //利用随机函数从十种颜色中任选一种作为网页背景色
  setTimeout(″changecolor()″,1000); //设置时钟,让背景色每秒变换一次
  return;}
  //-->
  </script>
  
  然后在中调用changecolor()函数即可:<body OnLoad=″javascript:changecolor()″>
  网页背景颜色每秒钟变换一次,够酷吧?
  如果把“document.bgColor=(linkarray[RandomNumber(10)]);”一句中的“bgColor”换成“fgColor”,也能实现网页文字不断地变色。此外,你也可以自己定义变色的时间周期,改变“setTimeout(″changecolor()″,1000);”中的“1000”即可。


↑返回目录
前一篇: “智慧型”网页制作技巧
后一篇: 滚动广告条的制作