更改背景圖像像滑塊

請幫助我，我是新的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"; 

    }; 
};

來源

2015-03-31 Armine Babertsian

請修正您的代碼的驗證和縮進。如果js，html和css完全jsfiddle將被添加，它也會有幫助。 – Pavel 2015-03-31 14:59:02

通過image[i].style.backgroundImage= "url('css/images1/img/img" + step + ".png')";只需更換image[i].src = "css/images1/img/img" + step + ".png";。它應該做的伎倆。

你可以得到更多信息here。

來源

2015-03-31 15:03:32

更改背景圖像像滑塊

回答

相關問題