한 페이지의 여러 Jquery 간단한 슬라이더

Question

첫 번째 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/

Answer 1

우선 먼저. 모두 이름 슬라이더 div에이 코드를 적용하려면이 작업을 수행 할 수 있습니다

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

따라서, 당신은 두 블록의 각각에 슬라이더 기능을 가하고있어, 별도.

(이 일을 gillyspy의 한 줄 방법은 더 나은, 나는 더 확실한 개념을 만들어 때문 개별적으로했다)

이 바이올린의 첫 번째 시도. 그것은 잘 작동하지 않을 것이지만, 흥미로운 방법으로 실패 할 것입니다. 그래서 계속해서 살펴보십시오.

단추가 모두 두 번째 블록에 영향을주었습니다. 이유를 이해하려면 Javascript에서 변수의 범위 지정에 대해 알아야합니다. (많은 설명이 있는데, 하나는 http://www.digital-web.com/articles/scope_in_javascript/입니다.) 그러나 여기서 간단한 설명은 암시 적으로 선언 된 변수가 전역 범위를 갖는다는 것입니다. 즉, 두 번째 블록에 슬레이트 함수를 적용했을 때 암묵적으로 선언 된 변수가 전역이고 첫 번째 블록에 대해 선언 된 (전역) 변수를 덮어 쓴다는 것을 의미합니다. 당신은 ... 바이올린의

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, 당신은 이미 실현 외부있는 것 같다 같이

이 솔루션은 'VAR'로 선언하는 것입니다, 그래서 그들은 현지있을거야 필요 없어.