Question

请帮助我，我是JS.So的新手，因为你可以看到我有12个div与一些backgorund图像。我想在上一次以相同的温度改变这12个backgorund图像。或者单击下一个。但我不知道该怎么做。我有一些JS代码，它可以工作，当我只是改变图像src。现在我怎么能改变背景图像呢？提前谢谢。

               <a href="#"><div onClick="show2(this.style)"class="img" style="background-image:url('css/images1/img/img1.jpg');background-size:90% 90%;")></div></a>
                <a href="#"><div onClick="show2(this.style)"class="img" style="background-image:url('css/images1/img/img2.jpg');background-size:90% 90%;")></div></a>
                <a href="#"><div onClick="show2(this.style)"class="img" style="background-image:url('css/images1/img/img3.jpg');background-size:90% 90%;")></div></a>
                <a href="#"><div onClick="show2(this.src)"class="img" style="background-image:url('css/images1/img/img4.jpg');background-size:90% 90%;")></div></a>
                <a href="#"><div onClick="show2(this.src)"class="img" style="background-image:url('css/images1/img/img5.jpg');background-size:90% 90%;")></div></a>
                <a href="#"><div onClick="show2(this.src)"class="img" style="background-image:url('css/images1/img/img6.jpg');background-size:90% 90%;")></div></a>
                <a href="#"><div onClick="show2(this.src)"class="img" style="background-image:url('css/images1/img/img7.jpg');background-size:90% 90%;")></div></a>
                <a href="#"><div onClick="show2(this.src)"class="img" style="background-image:url('css/images1/img/img8.jpg');background-size:90% 90%;")></div></a>
                <a href="#"><div onClick="show2(this.src)"class="img" style="background-image:url('css/images1/img/img9.jpg');background-size:90% 90%;")></div></a>
                <a href="#"><div onClick="show2(this.src)"class="img" style="background-image:url('css/images1/img/img10.jpg');background-size:90% 90%;")></div></a>
                <a href="#"><div onClick="show2(this.src)"class="img" style="background-image:url('css/images1/img/img11.jpg');background-size:90% 90%;")></div></a>
                <a href="#"><div onClick="show2(this.src)"class="img" style="background-image:url('css/images1/img/img12.jpg');background-size:90% 90%;")></div></a>


                 <div class="arrowswrapper"><a href="#" onClick="next(-1)" style="float:left">prev.</a><a href="#" onClick="next(1)" style="float:right">next</a> </div>

var step = 12;
var total = 100;
function next(x) {
    var image = document.getElementsByClassName("img");
    for (var i = 0; i < image.length; i++) {
        step = step + x;
        if (step > total) {
            step = 12;
        }
        if (step < 12) {
            step = total;
        }
        image[i].src = "css/images1/img/img" + step + ".png";

    };
};

Answer 1

只需将image[i].src = "css/images1/img/img" + step + ".png";替换为image[i].style.backgroundImage= "url('css/images1/img/img" + step + ".png')";。应该这样做。

您可以获得更多信息here。

像滑块一样改变背景图像

1 个答案: