<!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. hibernate 学习笔记2

    1.Criteria查询接口适用于组合多个限制条件来搜索一个查询集. 要使用Criteria,需要遵循以下步骤: *创建查询接口: Criteria criteria=session.createCr ...

  2. 学习Python要知道哪些重要的库和工具

    本文转自:https://github.com/jobbole/awesome-python-cn 环境管理 管理 Python 版本和环境的工具 p:非常简单的交互式 python 版本管理工具. ...

  3. 项链(burnside)

    Description 有一个长度为 \(n\) 的项链,首尾相接形成环,现在你要给每一个位置一个颜色 \([1,m]\), 求所有不同的项链个数(可以通过旋转变成一样的称为相同) Solution ...

  4. AngularJS的日期格式化去掉秒

    <td>订单创建时间:{{item.odatetime.substring(0,16)}}</td>

  5. 有意思的MySQL之最

    写在前面 在平时工作中特别是架构设计阶段,咨询量最多的也就是MySQL之最了,在不经意间发现原来MySQL手册里面已经列举了,顺手拿来翻译下,如果有翻译错误或者不当的地方,欢迎批评指正. 最大和最小 ...

  6. CentOS7部署.Net Core2.0站点(上)

    其实类似的教程网上已经有很多了,之所以要写,是应为发现在使用最新的centos7和.netcore2.1版本时还是遇到了不少坑,所以记录下,以后希望大家能少走弯路. 一.安装CentOS7 我是用虚拟 ...

  7. 【原创】Hadoop的IO模型（数据序列化，文件压缩）

    数据序列化 我们知道,数据在分布式系统上运行程序数据是需要在机器之间通过网络传输的,这些数据必须被编码成一个个的字节才可以进行传输,这个其实就是我们所谓的数据序列化.数据中心中,最稀缺的资源就是网络带 ...

  8. centos自带python2.6升级到python2.7。并解决yum pip easy_install pip等模块兼容性问题

    参考原文:  https://www.cnblogs.com/kimyeee/p/7250560.html   https://www.cnblogs.com/galaxy-gao/p/5796488 ...

  9. MongoDB 创建集合

    createCollection() 方法 MongoDB db.createCollection(name, options) 是用来创建集合. 语法: 基本的 createCollection() ...

  10. odps编写UDF的实现

    问题 尝试写一个UDF,参数支持输入x,y与一个Polygon,返回结果是(x,y)是否在输入的Geometry之内? 环境 eclipse odps 插件 jts包:jts-1.8.jar 解法 i ...