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. ...
随机推荐
- 搭建简单FTP
搭建简单FTP 环境 CentOS 7 安装 yum install vsftpd 修改配置文件, 在/etc/vsftpd/vsftpd.conf中添加allow_writeable_chroot= ...
- BNU27937——Soft Kitty——————【扩展前缀和】
Soft Kitty Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer IO format: %lld Java class n ...
- 周记2——ios的日期格式bug
转眼又到了周末,转眼又要上班,转眼...大概这就是一眼万年的意思吧. 这周继续IM(即时聊天),项目用的是LayIM移动端改装的,仅仅“借用”了一个聊天窗口.由于是内嵌App的页面,自然少不了Andr ...
- linux新建用户切换后显示-bash-4.1$（转载）
今天新建了一个MQM的用户 , [plain] view plaincopy useradd -g mqm -d /var/mqm passwd mqm 终端中显示 -bash-4.1$而不是 [mq ...
- Grunt项目构建-插件学习
听说过Grunt也有两年了,用了也有两年了,然而都是在别人搭好的架子上做开发,当想要对前端工程化整体把控时就一脸懵逼了! Grunt是什么? Grunt是一套web前端工程化构建工具.(ps:关于Gr ...
- SQL语句整理(二) 数据定义语言DDL
前言: 这是我学数据库时整理的学习资料,基本上包括了所以的SQL语句的知识点. 我的教材是人大王珊老师的<数据库系统概论>. 因为是手打的,所以会用一些细节打错了,但都挺明显也不多(考完试 ...
- log4j2分层输出日志
在java mvc框架开发过程中,我们经常的将代码分为类似controller(控制层).service(业务层).rpc(远程接口调用层).dao(数据层)等层级,如果将所有层级的日志全部都打到一个 ...
- 9、springboot之处理静态资源
在springboot项目中的resource根目录下建立三个文件夹static.public.resources 里面都放同样名字的图片 但是图片内容不一样 启动springboot之后输入 htt ...
- docker 开机自动启动容器
注意:如果有存在多个容器,都占用了同一端口,那么只会起来一个,要注意,我在调试时候就遇到这个坑了 在使用docker run启动容器时,使用--restart参数来设置: docker run -m ...
- laravel验证规则
就拿laravel的登入验证来举例: 1.进入login控制器, use AuthenticatesUsers;从这里点进去找到验证规则 //验证protected function validate ...