点滴珍藏|快乐分享
当前位置: 建站编程 > Javascript 根据当前时间随机展示图片

Javascript 根据当前时间随机展示图片

2016-11-09 分类:建站编程 作者:西狂 阅读(10)

很多站长都喜欢在网站首页的显要位置设置一个轮播图片,或者叫幻灯片,展现网站的重要内容,也是为了使网页内容看上去更加丰富多彩,因此常会用到一些插件或者代码来实现这个功能。

但大部分这些jQuery的轮播图片插件代码有一个特点就是,要把所有要显示的轮播图片都缓存完后,才会显示第一幅图片。而轮播图片通常都是清晰度较高、体积较大的图片,在有多幅轮播图片的情况下,会严重拖慢页面的载入速度,从而影响用户体验。 因此西狂找到了下面的 javascipt 方法,以随机图片代替幻灯片。网页代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>test Js</title> 
</head> 
<body> 
    <script language="javascript"> 
    var New_Array = new Array(); 
    
    New_Array[0]="https://www.xikuang.ren/zy/img/cat/1.jpeg" 
    New_Array[1]="https://www.xikuang.ren/zy/img/cat/2.jpeg" 
    New_Array[2]="https://www.xikuang.ren/zy/img/cat/3.jpeg" 
    New_Array[3]="https://www.xikuang.ren/zy/img/cat/4.jpeg" 
    New_Array[4]="https://www.xikuang.ren/zy/img/cat/5.jpeg" 
    New_Array[5]="https://www.xikuang.ren/zy/img/cat/6.jpeg"
     
    var My_time = new Date(); 
    var Now_time = My_time.getSeconds(); 
    
    if (Now_time <10) 
        { 
        document.write("<img src=\""+New_Array[0]+"\" alt\"\" \/>"); 
        } 
    else if (Now_time<20) 
        { 
        document.write("<img src=\""+New_Array[1]+"\" alt\"\" \/>"); 
        } 
    else if (Now_time<30) 
        { 
        document.write("<img src=\""+New_Array[2]+"\" alt\"\" \/>"); 
        } 
    else if (Now_time<40) 
        { 
        document.write("<img src=\""+New_Array[3]+"\" alt\"\" \/>"); 
        } 
    else if (Now_time<50) 
        { 
        document.write("<img src=\""+New_Array[4]+"\" alt\"\" \/>"); 
        } 
    else 
        { 
        document.write("<img src=\""+New_Array[5]+"\" alt\"\" \/>"); 
        } 
    </script> 
</body> 
</html>

这段js代码根据载入或刷新页面时的当前时间秒数,分别载入不同的图片。例如这段代码就把60秒时间平均分配给了6幅图片,实现了图片随机展示。(具体效果可以参考本站首页,或者将上面的代码保存为HTML格式用浏览器打开)。 可以根据图片数量,将60秒任意划分多个时段进行展示。 可以通过调整时间区间,调整各图片的展示概率。 可以通过调整时间区间,实现上午、下午、晚上或者按照日期、星期数展示不同图片。 可以通过调整代码,实现随机输出视频、文字、链接等其他元素。

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

支付宝
微信
0

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - Javascript 根据当前时间随机展示图片

博客简介

欢迎来到西狂部落阁

精彩评论