一页上有多个Jquery简单滑块

时间:2013-05-01 00:47:44

标签: jquery function slider

我创建了我的第一个Jquery内容滑块(点+幻灯片)。它工作正常,但我不能在一个页面中实现两个滑块。 如何在两个ID上调用函数? 我刚开始学习JS,所以我只需要两个滑块工作,而不是让它们更好等。 感谢

<div class="slider"  id="slider">
    <div class="slides">
                 <!-- ... -->
    </div>
</div>

<div class="slider"  id="slider2">
    <div class="slides">
                    <!-- ... -->
    </div>
</div>

JS

(function($) {
    $.fn.slajder = function() {
        return this.each(function() {

    slider = $(this);
    slider.prepend('<nav class=\"dots"><span></span><span></span></nav>');

    slides = slider.children(".slides");
    dots = slider.children(".dots");
    dot = dots.children("span");
    dot1 = dots.children("span:first-child");
    dot2 = dots.children("span:nth-child(2)");

    dot1.click(function(){
        slides.animate({
            top: '10px',
        }, 600, function() {
        // Animation complete.

        });
        dot.css("-webkit-box-shadow","#444 0 1px 1px 0px");
        $(this).css("-webkit-box-shadow","#444 0 -1px 1px 0px");
    });
    dot2.click(function(){
        slides.animate({
            top: '-130px',
        }, 600, function() {
        // Animation complete.

        });
        dot.css("-webkit-box-shadow","#444 0 1px 1px 0px");
        $(this).css("-webkit-box-shadow","#444 0 -1px 1px 0px");
    });


        });
    };
}(jQuery));

// this one goes at bottom of a page in script tags
$(document).ready(function() {
 $('#slider').slajder();
});

小提琴 - http://jsfiddle.net/lima_fil/CK2jS/

1 个答案:

答案 0 :(得分:1)

首先是第一件事。要将此代码应用于两个命名滑块div,您可以执行以下操作:

$(document).ready(function() {
    $('#slider').slajder();
    $('#slider2').slajder();
});

因此,您将滑块功能分别放在两个块中的每个块上。

(gillyspy这样做的单行方式更好;我之所以单独做它们只是因为它使概念更加明显)

首先在你的小提琴中试试。它不会很有效,但它会以一种有趣的方式失败,所以请继续看看它。

按钮都影响了第二个区块。要了解原因,您需要了解Javascript中变量的范围。 (有很多解释;一个是http://www.digital-web.com/articles/scope_in_javascript/)。然而,这里的简单解释是隐式声明的变量具有全局范围。这意味着当你将slajder函数应用于第二个块时,其中隐式声明的变量是全局的,并覆盖为第一个块声明的(全局)变量。

解决方案是用'var'声明它们,因此它们将是本地的:

var slides = slider.children(".slides");
var dots = slider.children(".dots");
var dot = dots.children("span");
var dot1 = dots.children("span:first-child");
var dot2 = dots.children("span:nth-child(2)");
你似乎已经意识到,小提琴中的dot3和dot4是无关紧要的......你不需要它们。