<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        ul{

            list-style:none;

        }

        .outer{

            width:196px;

            margin:20px auto;

        }

        .clearfix{

            zoom: 1;

        }

        .clearfix:after{

            content:".";

            display:block;

            width:0;

            height:0;

            visibility:hidden;

            clear: both;

        }

        .outer li{

            float:left;

        }

    </style>

</head>

<body>

<div class="outer">

    <ul class="clearfix">

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</div>

</body>

<script src="jquery-1.11.3.min.js"></script>

<script>

    function getAry(ary,num){

        var startAry=[],endAry=[];

        for(var i=0;i<ary.length;i++){

            startAry.push(ary[i]);

        }

        for(var j=0;j<num;j++){

            if(startAry.length>0){

                var arrIndex = Math.floor(Math.random()*startAry.length);

                /*var arrIndex = Math.round(Math.random()*(startAry.length-1));*/

                endAry[j]=startAry[arrIndex];

                startAry.splice(arrIndex,1);

            }else{

                break;

            }

        }

        return endAry;

    }

    var aryList=[0,1,2,3,4,5,6,7,8,9];

    var aryImg=getAry(aryList,6);

    $("li").each(function(){

        var $index=$(this).index();

        var oImg="<img src="+'image/0'+aryImg[$index]+'.png'+"/>";

        $(this).append(oImg);

    })

</script>

</html>

步骤：

1）首先将所有名片按照相同规则命名（如00.png,01.png,02.png.......）

2)将图片中有规律递增的数字取出来，形成一个数组aryList（如果图片是从00.png到09.png，则建个1-9的数组[0,1,2,3,4,5,6,7,8,9]）

3)创建一个方法getAry，将数组aryList和所需显示图片的个数num以形参的形式传入getAry中

4）新建一个数组startAry，并将aryList中的内容克隆到startAry中

5）新建一个数组endAry，随机获取startAry中内容的索引，并将该索引位置处的值放到endAry中（即endAry[j]=startAry[arrIndex]）

，然后把startAry中该项值删除，直到放满num个。

6）新建一个数组aryImg，用于存放getAry的执行结果

7）遍历页面中的li，然后新建img标签，赋值后把img标签添加到li中即可

如需添加链接地址，请看下列代码：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        ul{

            list-style:none;

        }

        .outer{

            width:196px;

            margin:20px auto;

        }

        .clearfix{

            zoom: 1;

        }

        .clearfix:after{

            content:".";

            display:block;

            width:0;

            height:0;

            visibility:hidden;

            clear: both;

        }

        .outer li{

            float:left;

        }

    </style>

</head>

<body>

<div class="outer">

    <ul class="clearfix">

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</div>

</body>

<script src="jquery-1.11.3.min.js"></script>

<script>

    function getAry(ary,url,num){

        var startAry=[],startUrl=[],endAry=[],endUrl=[];

        for(var i=0;i<ary.length;i++){

            startAry.push(ary[i]);

            startUrl.push(url[i]);

        }

        for(var j=0;j<num;j++){

            if(startAry.length>0){

                var arrIndex = Math.floor(Math.random()*startAry.length);

                /*var arrIndex = Math.round(Math.random()*(startAry.length-1));*/

                endAry[j]=startAry[arrIndex];

                endUrl[j]=startUrl[arrIndex];

                startAry.splice(arrIndex,1);

                startUrl.splice(arrIndex,1);

            }else{

                break;

            }

        }

        var aryEnd=[endAry,endUrl];

        return aryEnd;

    }

    var aryList=[0,1,2,3,4,5,6,7,8,9];

    var aryUrl=["0.html","1.html","2.html","3.html","4.html","5.html","6.html","7.html","8.html","9.html"];

    var aryImg=getAry(aryList,aryUrl,6);

    $("li").each(function(){

        var $index=$(this).index();

        var oImg="<a href="+aryImg[1][$index]+"><img src="+'image/0'+aryImg[0][$index]+'.png'+"/></a>";

        $(this).append(oImg);

    })

</script>

</html>

jq实现随机显示部分图片在页面上（兼容IE5）的更多相关文章

  1. jq实现 元素显示后 点击页面的任何位置除元素本身外 隐藏元素

    $(".share-weixin").on("click",function(e){ var $wx=$(".weixin-share"), ...

  2. JS使用默认图片代替页面上无法显示的图片

    1.js方法: function replaceErrorImg(obj) { obj.src="images/common/error.bmp"; } 2.jquery绑定 $( ...

  3. easyui页面上显示和PL/SQL编码问题

    在页面上,只需要显示人们看的懂的文字就行,但是在数据库里面就不一定了,一般情况下,在数据库里面存字母,数字等除了汉字以外的字符,存汉字有个问题,就是有时候不同oracle数据库的客户端会出现乱码问题: ...

  4. jsp页面上传多个name值到后台

    平常利用表单提交的一般都是一个文本框对应一个name,而在后台都是利用request.getParameter(String name);这段代码返回的是一个String类型的参数:而当我们页面上有多 ...

  5. JS实现的随机显示图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  6. php 随机显示图片的函数(实例分享)

    转自:http://www.jbxue.com/article/12695.html 发布:thatboy   来源:Net     [大 中 小] 本文分享一个php实现的随机显示图片的函数,可以将 ...

  7. php 随机显示图片的函数(实例)

    转自:http://www.jbxue.com/article/12695.html   发布:thatboy   来源:Net     [大 中 小] 本文分享一个php实现的随机显示图片的函数,可 ...

  8. 如是使用JS实现页面内容随机显示

    之前有个客户咨询我,因为他们公司的业务员有多个人,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平.本文我们将和大家 ...

  9. Jquery判断页面图片是否加载失败,加载失败则显示默认图片

    例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

随机推荐

  1. C 标准库 - string.h之strpbrk使用

    strpbrk Locate characters in string,Returns a pointer to the first occurrence in str1 of any of the ...

  2. jar包读取配置文件

    读取jar包内配置文件: Properties config = new Properties(); InputStream in = this.getClass().getClassLoader() ...

  3. 【AAA】AAA协议介绍

    AAA AAA简介 AAA是认证(Authentication).授权(Authorization)和计费(Accounting)的简称,是网络安全中进行访问控制的一种安全管理机制,提供认证.授权和计 ...

  4. 开发常用的 JavaScript 知识点总结

    No1.语法和类型 1.声明定义 变量类型:var,定义变量:let,定义块域(scope)本地变量:const,定义只读常量.变量格式:以字母.下划线“_”或者$符号开头,大小写敏感.变量赋值:声明 ...

  5. js惊奇效果分享，和排序算法

    分享地址:http://www.cnblogs.com/lhb25/p/8-amazing-codepen-demos.html 排序算法分享地址:http://www.w3cplus.com/js/ ...

  6. Firebird Fluentdata

    Fluentdata 支持很多种数据库驱动,但对Firebird不友好,不过可以使用DB2Provider来操作大部分功能, 例如: new DbContext().ConnectionString( ...

  7. JavaScript十大古怪之处（出自众妙之门）

    1. null是一个对象: alert(typeof null);  //objects NULL表示没有值,那么很明显他不能作为任何东西的实例,所以下式应该等于false: alert(null i ...

  8. 互联网轻量级框架SSM-查缺补漏第二天

    简言:第一天没咋看,因为看的时候已经是下午了.今天上午也因为工作上的事没咋看,本来想按照天去写的,但是内容会太散吧.我决定把整块的内容放在一起写了.天数啥的,就那样把. 还有,我只是言简意赅的去总结一 ...

  9. Javascript获取页面表格中的数据

    var main=mygrid.gettable("11"); //表示获取非固定列的表格 var main1=mygrid.gettable("01");// ...

  10. bat中实现代码拷贝到指定目录后启动命令行并更改默认路径

      ### window书写shell脚本,实现判断指定文件是否存在,存在就删除,然后复制新文件到此目录 ``` if exist "G:\test\test2\1.txt" (d ...