五张随机图片，点击一下背景图片，就自动切换为另一张
参考一下：https://blog.csdn.net/weixin_43398820/article/details/103228913
只要将for循坏改为随机数就行了
如果对你有帮助，可以点击我这个回答右上方的【采纳】按钮，给我个采纳吗，谢谢
<img src="1.jpg" width="100" height="100" alt="" onclick="pf(this)"/>
<script type="text/javascript">
var arr = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];
function pf(t) {
t.src = arr[Math.floor(Math.random()*arr.length)];
}
</script>
实例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<title>按钮变化</title>
<style>
body,html{
margin: 0;
padding: 0;
background-color: aliceblue;
width: 100%;
height: 100%;
}
#btn_box{
width: 60%;
height: 40%;
}
#btn_box .btn{
width: 20%;
height: 100%;
border-radius: 8%;
}
.btnValid{
/* background:url(./img/btnValid.png); */
background:url(https://img-blog.csdnimg.cn/20191124210832769.png);
background-size: 100% 100%;
}
.btnInValid{
/* background: url(./img/btnInvalid.png); */
background: url(https://img-blog.csdnimg.cn/20191124211127501.png);
background-size: 100% 100%;
}
</style>
</head>
<body>
<div id="btn_box">
<button class="btn btnValid" id="btn_0" value="0"></button>
<button class="btn btnInValid" id="btn_1" value="1"></button>
<button class="btn btnInValid" id="btn_2" value="2"></button>
<button class="btn btnInValid" id="btn_3" value="3"></button>
</div>
<script>
$(function() {
// $("#btn_box .btn").click(function() { //还可以换成点击事件
$("#btn_box .btn").hover(function() {
var value = $(this).val();
var btnId = "#btn_"+value;
$(btnId).removeClass("btnInValid").addClass("btnValid");
for(var i=0;i<4;i++) {
if(i != value) {
var inValidBtn = "#btn_"+i;
$(inValidBtn).removeClass("btnValid").addClass("btnInValid");
}
}
})
})
</script>
</body>
</html>如果对你有帮助，记得采纳一下哦~，谢谢！