有動態旋轉木馬的jQuery滑塊

Question

我創建了一個自定義的jQuery滑塊，它具有旋轉木馬，其中ul寬度是從li動態設置的。

我把有#bgWrapper身體上的一個DIV ID，在點擊轉盤李縮略圖我改變使用李的相對圖像#bgWrapper身體背景圖像。像裏的rel =「圖像/ bgimage/bgone.jpg」

我想改變身體的背景圖像作爲傳送帶的縮略圖，以便在下一個/上箭頭的點擊。

這裏是我的jQuery代碼：

$(document).ready(function() { 

    //Variable Define 
    var thumbWrap = $("ul#carousel"); 
    var thumb = $("ul#carousel>li"); 
    var slider = $(".sliderCont"); 
    var ltarrow = $(".leftArrow"); 
    var rtarrow = $(".rightArrow"); 
    var ulwidth = 0; 
    var bgImg = $("#bgWrapper"); 



    //Remove last LI margin for set UL perfect width 
    $("ul#carousel>li:last-child").css("width", "200px"); 



    //UL width from LI 
    thumb.each(function() { 
     ulwidth += $(this).width() 
    }); 
    thumbWrap.width(ulwidth); 



    //Use same LI width value on scrollLeft: 
    ltarrow.click(function() { 
     slider.animate({ 
      scrollLeft: "-=225px" 
     }, { 
      duration: "slow", 
      easing: "easeInOutQuint" 
     }); 
    }); 

    rtarrow.click(function() { 
     slider.animate({ 
      scrollLeft: "+=225px" 
     }, { 
      duration: "slow", 
      easing: "easeInOutQuint" 
     }); 
    }); 



    //BG Image Change reflect as relation of LI 
    bgImg.css("background-image", "url(images/bgimage/bgone.jpg)"); 
    thumb.click(function() { 
     bgImg.css("background-image", "url('" + $(this).attr('rel') + "')"); 
    }); 


}); 

這裏是演示網址鏈接。 http://jsfiddle.net/NwmLL/1/
更新後的鏈接http://jsfiddle.net/NwmLL/2/只需添加和刪除一個類.li選擇就可以知道選擇了哪個li。

我解決了這個問題，通過URLhttp://jsfiddle.net/NwmLL/3/

Answer 1

檢查演示jsFiddle

我希望這對您有用去。