更改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 + ')'); 
});