jqueryスライダの新しいスライドごとにボディの背景を変更する

Question

div 800px * 800pxがあるとします。このDIVの中には、400px * 400pxの寸法を持つjqueryスライダがあります。ここで、スライダにはimage1、image2、image3などの画像はほとんど含まれていません。スライダがスライドすると、800px * 800pxの背景も変わる必要があります。たとえば、スライダーがimage1を表示している場合、より大きなdivの背景もimage1でなければならず、それに伴って同期的に変化します。何か提案してください？

Answer 1

スライダーの画像数と同じ数のステップがあると仮定すると、スライダーの"slide" eventを使用して2つの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 + ')'); 
});