JSJquery，如何实现背景图片的更换

JavaScript023

JSJquery，如何实现背景图片的更换,第1张

更换背景图片有两种方式：

1、直接给元素附加css，因为js附加的css样式要比css中的样式权限高，那么js设置的背景图片就会覆盖之前的图片

$(this).css("background","url(1.jpg) no-repeat 0 0")

2、写两个class，一个class里面写一个背景图片，js中操作的话直接改变元素的class就可以了

$(this).removeClass('classA').addClass('classB')

相对而言，第二种方式更好一点，实现了js中尽量不书写css的理念，同时第二种可以实现背景图片不断替换，而第一种不行

有两种比较直接的方式，

第一种方法：预先设置一个样式，然后在js中操作，给div加上这个class。

html代码：

-----

<div id="test"></div>

-----

预先设置一个样式：

-----

.bg {

background-image: url(xxx.jpg)

}

-----

然后js获取这个div，给div加上名为bg的class

-----

var div = document.getElementById('test')

div.className += ' bg'

-----

第二种方法，直接设置div的style属性：

-----

var div = document.getElementById('test')

div.style.backgroundImage = 'url(xxx.xxx)'

-----

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        html{

            height: 100%

        }

        body {

            background-size: 100% 100%

            background-repeat: no-repeat

            height: 100%

        }

    </style>

</head>

<body>

</body>

<script>

    let imgArr = ["https://iknow-base.cdn.bcebos.com/qixiqbpcbanner.jpg", "https://iknow-base.cdn.bcebos.com/%E9%BB%84%E5%9C%A3%E4%BE%9D%E7%89%A9%E6%96%99%2Fqb%E9%A1%B5%E8%BD%AE%E6%92%AD%E5%9B%BE%E9%BB%84%E5%9C%A3%E4%BE%9D270x170x2.jpg", "https://iknow-base.cdn.bcebos.com/trishafish%2F%E7%9F%A5%E9%81%93PC-QB-540-280.jpg"]

    let num = 0

    let setNum = localStorage.getItem("num")

    if (setNum) {

        num = setNum

    }

    console.log(imgArr[num])

    document.body.style.backgroundImage = "url(" + imgArr[num] + ")"

    if (num == imgArr.length - 1) {

        num = 0

    } else {

        num++

    }

    localStorage.setItem("num", num)

</script>

</html>

 请采纳