多个Jquery简单的滑块在一个页面上

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

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

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

(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/

来源

2013-05-01 lima_fil

常见的选择器是类“滑块”所以'$（'。slider'）。slajder（）;' – gillyspy 2013-05-01 01:11:49

第一件事第一。若要将此代码，并重命名为滑块的div，你可以这样做：

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

因此，你把滑块功能到每两个区块，分别。

（这样做的gillyspy的单行方式是更好的，我做他们分开只是因为它使概念更明显）

尝试首先在你的小提琴。它不会工作，但它会以一种有趣的方式失败，所以继续看看吧。

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

解决的办法是用“无功”来声明他们，因此他们将本地：

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的小提琴，你似乎已经意识到，是多余的...你不需要它们。

来源

2013-05-01 01:21:00

感谢您的资源和帮助。 – 2013-05-01 01:51:23

多个Jquery简单的滑块在一个页面上

回答

相关问题