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

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值