更改jQuery滑塊的每個新幻燈片上的身體背景

Question

假設我有一個div 800px * 800px。在這個DIV中，我有一些尺寸爲400px * 400px的jquery滑塊。現在滑塊包含幾個圖像，如image1，image2，image3等。我想要的是，當幻燈片更改滑塊時，800px * 800px的背景也必須更改。例如，如果滑塊顯示image1，那麼較大div的背景也必須是image1等等同步更改。有什麼建議嗎？

Answer 1

假設您的滑塊具有與圖像數量相同的步數，那麼您可以使用滑塊的"slide" event來同步兩個div。

例如

// variables for the divs mentioned 
var $div800 = $('#div800'); // or whatever 
var $div400 = $('#div400'); // or whatever 
// after creating the slider... 
$('slider selector here').bind('slide', function(event, ui) { 
    var url = 'http://example.com/images/image' + ui.value + '.jpg'; // or however you construct your url to the image 
    $div800.css('background-image', 'url(' + url + ')'); 
});