HTML随机图片代码

    2020-03-05 11:14:46

    发表时间:

    HTML技术:如何在网页中图片的随机显示,图片随机显示是一个应用非常广泛的技巧。比如随机banner的显示,当你进入一个网站时它的banner总是不同的,或者总有内容不同的提示(tips),大家在网上浏览时会经常发现这样的例子。
    图片随机显示是一个应用非常广泛的技巧。比如随机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>
    这只是一个简单的例子,还有许多的功能可以实现,比如,设定图片的显示机率等。

    KEYAN编码网址解码

    · END ·

    关键词:HTML技术:如何在网页中图片的随机显示 标签:如何在网页中图片的随机显示

    以上内容来源本站

文章推荐:

最新 工具

HTML随机图片代码

发表时间:2020-03-05 11:14:46

HTML技术:如何在网页中图片的随机显示,图片随机显示是一个应用非常广泛的技巧。比如随机banner的显示,当你进入一个网站时它的banner总是不同的,或者总有内容不同的提示(tips),大家在网上浏览时会经常发现这样的例子。
图片随机显示是一个应用非常广泛的技巧。比如随机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>
这只是一个简单的例子,还有许多的功能可以实现,比如,设定图片的显示机率等。

· END ·

关键词: 标签:

以上内容来源本站

//评论数 //参与数

博主简介 - 广告合作 - 文章投稿 - 故事文摘 - 典范条目 - 博主新闻

 百科创建更新

网站地图

 

© 2020 blog.dgso.cn 赵彦彬博客 吉ICP备17000796号-1