jq实现随机显示部分图片在页面上（兼容IE5）
<!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）的更多相关文章
- jq实现 元素显示后 点击页面的任何位置除元素本身外 隐藏元素
$(".share-weixin").on("click",function(e){ var $wx=$(".weixin-share"), ...
- JS使用默认图片代替页面上无法显示的图片
1.js方法: function replaceErrorImg(obj) { obj.src="images/common/error.bmp"; } 2.jquery绑定 $( ...
- easyui页面上显示和PL/SQL编码问题
在页面上,只需要显示人们看的懂的文字就行,但是在数据库里面就不一定了,一般情况下,在数据库里面存字母,数字等除了汉字以外的字符,存汉字有个问题,就是有时候不同oracle数据库的客户端会出现乱码问题: ...
- jsp页面上传多个name值到后台
平常利用表单提交的一般都是一个文本框对应一个name,而在后台都是利用request.getParameter(String name);这段代码返回的是一个String类型的参数:而当我们页面上有多 ...
- JS实现的随机显示图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- php 随机显示图片的函数(实例分享)
转自:http://www.jbxue.com/article/12695.html 发布:thatboy 来源:Net [大 中 小] 本文分享一个php实现的随机显示图片的函数,可以将 ...
- php 随机显示图片的函数(实例)
转自:http://www.jbxue.com/article/12695.html 发布:thatboy 来源:Net [大 中 小] 本文分享一个php实现的随机显示图片的函数,可 ...
- 如是使用JS实现页面内容随机显示
之前有个客户咨询我,因为他们公司的业务员有多个人,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平.本文我们将和大家 ...
- Jquery判断页面图片是否加载失败,加载失败则显示默认图片
例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
随机推荐
- 用eclipse查看JDK源代码
把jdk的源代码导入eclipse
- shell之“>/dev/null 2>&1” 详解
shell中可能经常能看到:>/dev/null 2>&1 命令的结果可以通过 %> 的形式来定义输出,其中 %> 代表文件描述符 我们将这个命令组合:"& ...
- CCF 201412-4 最优灌溉
问题描述 试题编号: 201412-4 试题名称: 最优灌溉 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 雷雷承包了很多片麦田,为了灌溉这些麦田,雷雷在第一个麦田挖了一口很 ...
- Hibernate查询所有数据的操作
Hibernate查询所有数据的操作方式有三种. 1.Query (1)使用该方法查询时,不需要编写sql语句,但是需要编写hql(Hibernate Query Language)语句,该语句是Hi ...
- python中文分词工具——结巴分词
传送门: http://www.iteye.com/news/26184-jieba
- React.js 小书 Lesson19 - 挂载阶段的组件生命周期（二）
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson19 转载请注明出处,保留原文链接和作者信息. 这一节我们来讨论一下对于一个组件来说,cons ...
- 使用Charles为Android设备抓取https请求的包
之前开发的Android APP使用的都是http请求,之后改成了https,就出现了以下情况,无法正常读取抓取的内容 找了好多资料说法大概差不多,照着弄,结果出现如下情况,后来发现这种情况其实是手机 ...
- linux 查看服务器系统资源和负载，以及性能监控
1.查看磁盘 df -h 2.查看内存大小 free [-m|g]#按MB,GB显示内存 3.查看每个进程的情况 cat /proc/5346/status PID 4.查看负载 uptime 5.查 ...
- Storm框架入门
1 Topology构成 和同样是计算框架的Mapreduce相比,Mapreduce集群上运行的是Job,而Storm集群上运行的是Topology.但是Job在运行结束之后会自行结束,Topolo ...
- 九、cent OS下tomcat改变日志目录
修改catalina.out的目录bin目录下修改catalina.sh:CATALINA_OUT="$CATALINA_BASE"/logs/catalina.out 此行内的 ...