在jquery滑块的每个新幻灯片上更改正文的背景

Question

假设我有一个div 800px * 800px。在这个DIV中，我有一些jquery滑块，尺寸为400px * 400px。现在滑块包含很少的图像，如image1，image2，image3等。我想要的是当幻灯片在滑块中发生变化时，800px * 800px的背景也必须改变。例如，如果滑块显示image1，则较大div的背景也必须是image1，依此类推。有什么建议吗？

Answer 1

假设您的滑块与图像数量具有相同的步数，则可以使用滑块的"slide" event来同步两个div。

e.g。

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