用JQuery实现用鼠标点击背景图片切换为其它五张中的一张

五张随机图片,点击一下背景图片,就自动切换为另一张

参考一下: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>

如果对你有帮助,记得采纳一下哦~,谢谢!