python点击按钮改变图片_javascript,jquery_jquery实现点击按钮随机改变页面中图片的src，javascript,jquery - phpStudy...

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列子

这样的移动端登录页面该怎么布局