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. ...
随机推荐
- 九度oj 1003 A+B 2010年浙江大学计算机及软件工程研究生机试真题
题目1003:A+B 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:12812 解决:5345 题目描述: 给定两个整数A和B,其表示形式是:从个位开始,每三位数用逗号",&qu ...
- Fatal error: Call-time pass-by-reference has been removed in *****.php on line 18
问题描述:最近刚刚将php升级到5.4.13,但是打开一个页面的时候出现报错:Fatal error: Call-time pass-by-reference has been removed in ...
- Python学习之环境搭建及模块引用
这是我学习Python过程积累的经验和踩过的坑,希望学习Python的新手们能尽量避免,以免不必要的时间浪费.今天也是我第一次接触Python. 基础语法看了两个晚上,所以如果没看的朋友们,抽时间先看 ...
- 微信小程序开发框架整理
目前除了原生的微信小程序开发外,各大厂商陆续造了自己的开发框架,现整理如下: WePY 腾讯官方开源的小程序组件化开发框架,目前有15K+Star ,一直在更新着,社区活跃,掉坑能快速的找到方法爬出来 ...
- 4、springboot之全局异常捕获
1.新建一个springboot项目 添加一个全局异常的类 import org.springframework.web.bind.annotation.ControllerAdvice; impor ...
- 无法解析 id,或者它不是字段
解决方法:首先,看下R文件,有没有你上面的ID.没有的话,点项目-clean . 有的话,估计你是导了android里面的那个R包了,你看看你导的包有木有 “import android.R”有的话去 ...
- div中嵌套div中使用margin-top失效问题
div中嵌套div中使用margin-top失效问题
- Iphone各个型号机型的详细参数，尺寸和dpr以及像素
1.iPhone尺寸规格 2.单位inch(英吋) 1 inch = 2.54cm = 25.4mm 3.iPhone手机宽高 上表中的宽高(width/height)为手机的物理尺寸,包括显示屏和边 ...
- linux cut: invalid byte, character or field list Try 'cut --help' for more information.
1. 概述 centos执行简单shell 脚本 报错 cut: invalid byte, character or field listTry 'cut --help' for more info ...
- cf1043F. Make It One(dp 容斥原理)
题意 题目链接 给出\(n\)个数,问最少选几个数,使他们的\(gcd = 1\) Sol 好神仙啊qwq. 首先,如果答案存在,那么最多为\(7\)(因为前\(7\)个质数乘起来\(>= 3e ...