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. ...
随机推荐
- Windows加密API的功能分类
本地数据加密保护本地数据加密保护机制提供了简单的DAPI调用接口,密钥管理等等一概由系统来处理.DAPI的数据加密保护机制在用户登录会话范围或者本地计算范围,使用操作系统设计的方式加密保护数据和解密还 ...
- Android OpenGL教程-第一课【转】
第一课 快速的开始一个Android OpenGL项目 首先,读懂我们的教程,需要有android的初步基础,我们这里只是通过android提供的SDK,来进行OpenGL的学习,所以你必须先学习如何 ...
- python-爬虫之requests模块介绍（登陆github）
介绍 使用requests可以模拟浏览器的请求,比起之前用到的urllib,requests模块的api更加便捷(本质就是封装了urllib3) 注意 requests库发送请求将网页内容下载下来以后 ...
- JQuery extend()与工具方法、实例方法
使用jQuery的时候会发现,jQuery中有的函数是这样使用的: $.get(); $.post(); $.getJSON(); 有些函数是这样使用的: $('div').css(); $('ul' ...
- MySQL prompt命令
修改提示符,设置后挺方便的 例如: 几个好用的参数 \d 当前数据库 \u 当前用户 \h 当前主机 更多参数可以参考mysol官方文档 参考文档:https://dev.mysql.com/doc/ ...
- 使用mpvue搭建一个初始小程序
1. 初始化一个 mpvue 项目 现代前端开发框架和环境都是需要 Node.js 的,如果没有的话,请先下载 nodejs 并安装. 然后打开命令行工具: # 1. 先检查下 Node.js 是否安 ...
- HDD 机械硬盘 安装 linux(centos7)
1. 下载 UltraISO 文件-->打开, 选中centos.iso镜像; 启动-->写入硬盘映像-->硬盘驱动器(选中u盘)写入方式(USB-HDD+v2)-->写入 ...
- Python-网络编程(三)
今天是网络编程的最后一天,明天会开始并发编程 socketserver模块实现并发 为什么要讲socketserver?我们之前写的tcp协议的socket是不是一次只能和一个客户端通信,如果用soc ...
- vue 数组重复，循环报错
Vue.js默认不支持往数组中加入重复的数据.可以使用track-by="$index"来实现.
- ArcSDE 10.2 for Oracle 12C安装注意事项
ArcSDE 10.2 for Oracle 12C安装注意事项 1.环境说明 从ArcSDE10.2.1开始支持Oracle 12C. 2.安装注意事项 SDE空间数据库可以安装到PDB中,使用Cr ...