多個jQuery滑塊移動每個div在同一頁面，任何方式來簡化代碼？

我有一個具有多個滑塊（從http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div）一個頁面，因爲他們每個人都是不同的div我只是重複的代碼，並把它改爲獨特的類，把這個代碼：多個jQuery滑塊移動每個div在同一頁面，任何方式來簡化代碼？

$(document).ready(function(){ 
    $(".slider1").slider({ 
    animate: true, 
    handle: ".handle1", 
    change: handleSliderChange1, 
    slide: handleSliderSlide1 
    }); 

    $(".slider2").slider({ 
    animate: true, 
    handle: ".handle2", 
    change: handleSliderChange2, 
    slide: handleSliderSlide2 
    }); 

    $(".slider3").slider({ 
    animate: true, 
    handle: ".handle3", 
    change: handleSliderChange3, 
    slide: handleSliderSlide3 
    }); 

}); 

function handleSliderChange1(e, ui) 
{ 
    var maxScroll = $(".gal1").attr("scrollWidth") - $(".gal1").width(); 
    $(".gal1").animate({scrollLeft: ui.value * (maxScroll/100) }, 1000); 
} 

function handleSliderSlide1(e, ui) 
{ 
    var maxScroll = $(".gal1").attr("scrollWidth") - $(".gal1").width(); 
    $(".gal1").attr({scrollLeft: ui.value * (maxScroll/100) }); 
} 



function handleSliderChange2(e, ui) 
{ 
    var maxScroll = $(".gal2").attr("scrollWidth") - $(".gal2").width(); 
    $(".gal2").animate({scrollLeft: ui.value * (maxScroll/100) }, 1000); 
} 

function handleSliderSlide2(e, ui) 
{ 
    var maxScroll = $(".gal2").attr("scrollWidth") - $(".gal2").width(); 
    $(".gal2").attr({scrollLeft: ui.value * (maxScroll/100) }); 
} 


function handleSliderChange3(e, ui) 
{ 
    var maxScroll = $(".gal3").attr("scrollWidth") - $(".gal3").width(); 
    $(".gal3").animate({scrollLeft: ui.value * (maxScroll/100) }, 1000); 
} 

function handleSliderSlide3(e, ui) 
{ 
    var maxScroll = $(".gal3").attr("scrollWidth") - $(".gal3").width(); 
    $(".gal3").attr({scrollLeft: ui.value * (maxScroll/100) }); 
}

雖然這工作得也很好，我有大約7這些幻燈片（只有3上面顯示），我覺得有點重複基本上相同的代碼...

有沒有辦法簡化這段代碼？

來源

2011-04-03 Hansol Kim

它看起來像滑塊演示是相當古老的滑塊是一個jQuery UI小部件。它看起來像side-scroll jQuery UI slider演示與您的問題中鏈接的演示頁面最接近。

我有一個玩轉，看看我是否可以模仿jQuery UI中的舊演示頁面，並提出了this demo。不知道這是否是你在之後。

來源

2011-04-03 21:05:52 andyb

真棒，這正是我尋找。雖然在這種情況下，滑塊必須在滑動內容之前......因爲我可以用css處理它，所以它不成問題：D 非常感謝！：D – 2011-04-04 07:59:41

如果您需要以不同的順序排列滑塊和內容，則可以更改jQuery正在尋找的「兄弟」。如果滑塊和內容是兄弟，也許使用[prev（）]（http://api.jquery.com/prev/）而不是next（）。 – andyb 2011-04-04 08:45:57

你可以將它包括一個功能，並通過所有必要的變量：

function divSlider(Handle, divId) { 

    this.slider({ 
    animate: true, 
    handle: Handle, 
    change: handleSliderChange(e, ui, divId); 
    slide: handleSliderSlide(e, ui, divId) }); 

function handleSliderChange(e, ui, divId) 
{ 
    var maxScroll = divId.attr("scrollWidth") - divId.width(); 
    divId.animate({scrollLeft: ui.value * (maxScroll/100) }, 1000); 
} 

function handleSliderSlide(e, ui, divId) 
{ 
    var maxScroll = divId.attr("scrollWidth") - divId.width(); 
    divId.attr({scrollLeft: ui.value * (maxScroll/100) }); 
} 

}

，那麼你可以通過

$('slider1').divSlider('.handle1', $('.gal1'));

林叫它不是100％肯定，如果這個工程..但我想它會讓你在正確的方向

來源

2011-04-03 13:31:37 Lauw

嗯，只是試了一下，它似乎並沒有工作..不知道爲什麼 – 2011-04-03 13:49:32

Humm我還沒有使用它很多，請嘗試閱讀這裏： http://blogs.microsoft.co。 il/blogs/basil/archive/2008/09/22/defined-your-own-functions-in-jquery.aspx 並嘗試在divslider函數外留下handleslider函數 – Lauw 2011-04-03 14:02:17

多個jQuery滑塊移動每個div在同一頁面，任何方式來簡化代碼？

回答

相關問題