更改背景图像像滑块

Question

请帮助我，我是新的JS.So，因为你可以看到我有12个div与一些backgorund images.I想改变这12个backgorund图像在同一个驯服时prev。或接下来点击。但我不知道该怎么做。我有一些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].style.backgroundImage= "url('css/images1/img/img" + step + ".png')";只需更换image[i].src = "css/images1/img/img" + step + ".png";。它应该做的伎俩。

你可以得到更多信息here。