jquery实现点击按钮随机改变页面中图片的src
HTML代码
单击
Javascript 代码,使用了jquery库
$(function () {
//模拟后台获得图片数据
var picData={
src:["images/0.jpg","images/1.jpg","images/2.jpg","images/3.jpg",
"images/4.jpg","images/5.jpg","images/6.jpg","images/7.jpg","images/8.jpg"]
};
//数据图片src数组,包含原html图片数据
var picArr=picData.src;
//数据图片总数
var picNum=picData.src.length;
var $oLi=$(".gallery li");
//新建html图片src地址存放数组
var targetArr=[];
//新建存放随机数数组
var ranArr=[];
var ranNum=Math.floor(Math.random()*picNum);
$("button").click(function() {
//如果初始数组不为空,则清空
if(ranArr.length>0){
ranArr.length=0;
}
//将html图片src存放到目标数组
for (var i = 0; i < $oLi.size(); i++) {
targetArr.push($oLi.find('img').eq(i).attr("src"));
}
//判断随机数对应的src在目标数组中是否存在,如果不存在返回-1,存在返回>-1的数
var isExist=$.inArray(picArr[ranNum], targetArr);
//根据li个数获取相应个数的随机数,并存放到ranArr数组中
for(var j=0;j
while(isExist>-1||$.inArray(ranNum, ranArr)>-1){
ranNum=Math.floor(Math.random()*picNum);
isExist=$.inArray(picArr[ranNum], targetArr);
}
ranArr.push(ranNum);
//更新随机数和判断
ranNum=Math.floor(Math.random()*picNum);
isExist=$.inArray(picArr[ranNum], targetArr);
}
//遍历li并且设置相应的img下的src属性
$oLi.each(function(index, val) {
$(this).find('img').attr('src', picArr[ranArr[index]]);
});
});
});
但是第三次单击按钮就出现浏览器不响应的情况,即卡死,只能退出浏览器(前两次单击可以实现相应功能)。不知问题出现在哪,求大神详细解答下。
相关阅读:
用React 开发文件名都是.js命名 webpack 怎样提取js文件里面的路径
表单提交,ie下回弹出下载弹框
Chrome DevTools 中如何灰色显示隐藏(display:none)元素?
关于正则表达式的`^`?
苹果手机不支持label
php等于判断反写的道理是什么?
一个vuejs实例只能绑定一个标签上么?
webkitAnimationEnd
爬虫爬取网页后,如何保存网页?
求一些检测元素或DOM方法的工具
sphinx能做关键词统计吗?
Nginx 访问目录下载问题
网页上本地文件怎么直接上传到七牛上?
sass去掉数值的单位
python内置类和自定义类不同的机制是如何做到的?
使用webpack报错
koa+koa-router+koa-body,post提交的数据为空
谁能给我解释一下YII2的依赖注入...
求视频截图持久化处理的JAVA列子
这样的移动端登录页面该怎么布局