多个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在同一页面，任何方式来简化代码？

回答

相关问题