<!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. 本地IDC机房数据库容灾解决方案

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯云数据库 TencentDB 发表于云+社区专栏 作者介绍:李明,腾讯云数据库架构师华南区负责人,曾在某专业数据库服务商.51jo ...

  2. 在create-react-app创建的React项目应用中配置JQ、Sass

    使用 create-react-app 配置 react 开发环境,像下面这样,就可以构建一个新的 react 单页面应用,非常方便. npm install -g create-react-app ...

  3. sublime text 3 3143注册码

    1.点击help->enter license: —– BEGIN LICENSE —– TwitterInc 200 User License EA7E-890007 1D77F72E 390 ...

  4. golang学习之go简单博客应用

    先说说golang的语法吧,个人觉得有以下特点: 简洁,不管是变量.方法声明,还是代码编写,均十分简洁,效率也比较高 非纯粹面向对象,但是go的struct类似c的struct,go的结构体还可以进行 ...

  5. https如何工作

    一.http 网络协议基于分层架构构建了七层模型,是ISO建立的用于计算机或者通信系统之间的互联的标准体系.下图展示了其中的五层: http被称为超文本传输协议,是互联网上应用最为广泛的一种网络协议, ...

  6. Java API 之 Properties 类

    1.简介 在项目中我们经常看到一种格式极其干净的配置文件,如:config.properties.在Java的体系结构中也提供了API对properties文件进行读取和写入等操作,即:Propert ...

  7. JFrame自适应大小

    pack();函数调用PreferedSize(); 所以对于组件要setPreferedSize();

  8. java温故而知新(8)反射机制

    一.什么是反射机制  简单的来说,反射机制指的是程序在运行时能够获取自身的信息.在java中,只要给定类的名字, 那么就可以通过反射机制来获得类的所有信息. 二.哪里用到反射机制  有些时候,我们用过 ...

  9. poj 3260 最少硬币(01+多重+完全背包)

    http://www.cnblogs.com/ACMan/archive/2012/08/14/2637437.html #include <iostream> #include < ...

  10. C Primer Plus note8

    error: too few arguments to function 'imax'| 运行上面的代码,产生了下面的错误: 中文翻译是:函数imax()中的参数太少. 查看imax()函数声明,发现 ...