Javascript 一页上有多个滑块_Javascript_Jquery_Slider

Javascript 一页上有多个滑块

javascript jquery

Javascript 一页上有多个滑块,javascript,jquery,slider,Javascript,Jquery,Slider,好的，我用javascript和Jquery构建了一个滑块（在你们的帮助下），但现在我想在一个页面上有多个滑块。而只使用一个javascript。但是…滑块的宽度（或项目数）可能不同：滑块的名称也因css宽度不同而不同那么如何使用1个javascript来控制不同的滑块呢这是我的密码： HTML <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="http://code.jquery.

好的，我用javascript和Jquery构建了一个滑块（在你们的帮助下），但现在我想在一个页面上有多个滑块。而只使用一个javascript。但是…滑块的宽度（或项目数）可能不同：滑块的名称也因css宽度不同而不同

那么如何使用1个javascript来控制不同的滑块呢

这是我的密码：

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#temp{
height: 300px;
}

#container{
    width: 500px;
    height: 150px;
    background:#CDFAA8;
    overflow:hidden;
    position:absolute;
    left: 13px;
    }

#slider{
    width: 800px;
    height: 150px;
    background:#063;
    position:absolute;
    left: 0px;
}

#block1{
    width: 100px;
    height: 150px;
    background:#067;
    float: left;
}

#block2{
    width: 100px;
    height: 150px;
    background:#079;
    float: left;
}

#move_right{
    height: 150px;
    width: 20px;
    background: #3f3f3f;
    position: absolute;
    right:0px;
    z-index: 200;
    opacity: 0.2;
}

#move_left{
    height: 150px;
    width: 20px;
    background: #3f3f3f;
    position: absolute;
    left:0px;
    z-index: 200;
    opacity: 0.2;
}
</style>
</head>

<body>
<div id="temp">
<div id="container">
    <div id="move_left"><button id="right">&laquo;</button></div><div id="move_right"><br><br><button id="left">&raquo;</button></div>
<div id="slider">

    <div id="block1">1</div>    
    <div id="block2">2</div>
    <div id="block1">3</div>    
    <div id="block2">4</div> 
    <div id="block1">5</div>    
    <div id="block2">6</div>
    <div id="block1">7</div>    
    <div id="block2">8</div>


</div>
</div>
</div>


<div id="slider">

    <div id="block1">1</div>    
    <div id="block2">2</div>
    <div id="block1">3</div>    
    <div id="block2">4</div> 
    <div id="block1">5</div>    
    <div id="block2">6</div>
    <div id="block1">7</div>    
    <div id="block2">8</div>


</div>
</div>
</div>


无标题文件
#临时工{
高度：300px；
}
#容器{
宽度：500px；
高度：150像素；
背景：#CDFAA8；
溢出：隐藏；
位置：绝对位置；
左：13px；
}
#滑块{
宽度：800px；
高度：150像素；
背景:#063；
位置：绝对位置；
左：0px；
}
#区块1{
宽度：100px；
高度：150像素；
背景:#067；
浮动：左；
}
#区块2{
宽度：100px；
高度：150像素；
背景：#079；
浮动：左；
}
#右移{
高度：150像素；
宽度：20px；
背景#3f3f；
位置：绝对位置；
右：0px；
z指数：200；
不透明度：0.2；
}
#左移{
高度：150像素；
宽度：20px；
背景#3f3f；
位置：绝对位置；
左：0px；
z指数：200；
不透明度：0.2；
}
&拉阔

»；
1.
2.
3.
4.
5.
6.
7.
8.
1.
2.
3.
4.
5.
6.
7.
8.

JavaScript

(function($) {
    var slider = $('#slider'),
        step = 500,
        left = parseInt(slider.css('left'), 10),
        max = $('#container').width() - slider.width(),
        min = 0;

    $("#left").click(function() {
        if (left > max) {
            var newLeft = left - step;
            left = (newLeft>max) ? newLeft : max;
            $("#slider").animate({
                "left": left + 'px'
            }, "slow");
        }
    });

    $("#right").click(function() {
        if (left < 0) {
            var newLeft = left + step;
            left = (newLeft<min) ? newLeft : min;
            slider.animate({
                "left": left + 'px'
            }, "slow");
        }
    });
})(jQuery);

（函数（$）{
变量滑块=$（“#滑块”），
步骤=500，
left=parseInt（slider.css（'left'），10），
max=$（“#容器”）.width（）-slider.width（），
最小值=0；
$（“#左”）。单击（函数（）{
如果（左>最大）{
var newLeft=左-步；
左=（新左>最大）？新左：最大；
$（“#滑块”）。设置动画({
“左”：左+像素
}“慢”）；
}
});
$（“#右”）。单击（函数（）{
if（左<0）{
var newLeft=左+步；
left=（newLeft理论上，您可以编写一些代码，将选择器作为参数带到包装器元素（其中包含所需的滑块元素）。然后您可以从该元素创建更具动态性的选择器。我不确定您从何处获得“step=500”从中，但这可能是您可以从相关元素中动态获取的内容。
这应该很好：
(function($) {
    $('#temp #container').each(function(){
        var slider = $(this).find('#slider'),
        parent = $(this),
        step = 500,
        left = parseInt(slider.css('left'), 10),
        max = parent.width() - slider.width(),
        min = 0;

    parent.find("#left").click(function() {
        if (left > max) {
            var newLeft = left - step;
            left = (newLeft>max) ? newLeft : max;
            slider.animate({
                "left": left + 'px'
            }, "slow");
        }
    });

    parent.find("#right").click(function() {
        if (left < 0) {
            var newLeft = left + step;
            left = (newLeft<min) ? newLeft : min;
            slider.animate({
                "left": left + 'px'
            }, "slow");
        }
    });
});
})(jQuery);

（函数（$）{
$（'#temp#container'）。每个（函数（）{
var slider=$（this）.find（“#slider”），
父项=$（此项），
步骤=500，
left=parseInt（slider.css（'left'），10），
max=parent.width（）-slider.width（），
最小值=0；
查找（“#左”）。单击（函数（）{
如果（左>最大）{
var newLeft=左-步；
左=（新左>最大）？新左：最大；
滑块。动画({
“左”：左+像素
}“慢”）；
}
});
查找（“#右”）。单击（函数（）{
if（左<0）{
var newLeft=左+步；
left=（newleft使用
和var slider2=$（'#slider2'）
尝试第二个滑块，并将滑块重命名为“right”slider2可能会有帮助吗？id必须是唯一的，不能有多个元素具有相同的id。而且，JavaScript不是Java。您研究过jQuery UI滑块吗？谢谢！我试图在PHP中构建一个工作区，以便可以为每个脚本填充不同的变量。但是，我希望有10个类似的脚本同时运行时间……提议的解决方案的JFIDLE有多个同名ID，但它不起作用。这件事的主要问题是不必使用ID，这样一段代码就可以独立应用于页面上的所有滑块。正如他们所说，这就是难点所在。@Charlie观察到，“JFIDLE有多个同名的ID，但它不起作用。这件事的主要问题是不必使用ID，这样一段代码就可以独立应用于页面上的所有滑块。正如他们所说，这就是问题所在。”