동일한 페이지에 2 개의 회전식 슬라이드 슬라이더

동일한 페이지에 2 개의 회전식 슬라이더 슬라이더를 추가하려고합니다 ... 그러나 아래 코드를 복사하고 다른 슬라이더 이름으로 편집하면 마지막 슬라이더가 제대로 작동합니다! JS는 다음과 같습니다 http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery 누구든지 도움이 될 수 있습니다동일한 페이지에 2 개의 회전식 슬라이드 슬라이더

$(document).ready(function() { 

    //rotation speed and timer 
    var speed = 5000; 
    var run = setInterval('rotate()', speed); 

    //grab the width and calculate left value 
    var item_width = $('#slides li', '#slides_2 li').outerWidth(); 
    var left_value = item_width * (-1); 

    //move the last item before first item, just in case user click prev button 
    $('#slides li:first', '#slides_2 li:first').before($('#slides li:last', '#slides_2 li:last')); 

    //set the default item to the correct position 
    $('#slides ul', '#slides_2 ul').css({ 
     'left': left_value 
    }); 

    //if user clicked on prev button 
    $('#prev', '#prev_2').click(function() { 

     //get the right position    
     var left_indent = parseInt($('#slides ul', '#slides_2 ul').css('left')) + item_width; 

     //slide the item    
     $('#slides ul', '#slides_2 ul').animate({ 
      'left': left_indent 
     }, 200, function() { 

      //move the last item and put it as first item    
      $('#slides li:first', '#slides_2 li:first').before($('#slides li:last', '#slides_2 li:last')); 

      //set the default item to correct position 
      $('#slides ul', '#slides_2 ul').css({ 
       'left': left_value 
      }); 

     }); 

     //cancel the link behavior    
     return false; 
    }); 

    //if user clicked on next button 
    $('#next', '#next_2').click(function() { 

     //get the right position 
     var left_indent = parseInt($('#slides ul', '#slides_2 ul').css('left')) - item_width; 

     //slide the item 
     $('#slides ul', '#slides_2 ul').animate({ 
      'left': left_indent 
     }, 200, function() { 

      //move the first item and put it as last item 
      $('#slides li:last', '#slides_2 li:last').after($('#slides li:first', '#slides_2 li:first')); 

      //set the default item to correct position 
      $('#slides ul', '#slides_2 ul').css({ 
       'left': left_value 
      }); 

     }); 

     //cancel the link behavior 
     return false; 
    }); 

    //if mouse hover, pause the auto rotation, otherwise rotate it 
    $('#slides', '#slides_2').hover(

     function() { 
      clearInterval(run); 
     }, 
     function() { 
      run = setInterval('rotate()', speed); 
     } 
    ); 
}); 

//a simple function to click next link 
//a timer will call this function, and the rotation will begin :) 
function rotate() { 
    $('#next', '#next_2').click(); 
}

나는이 웹 사이트에서이 코드를 가지고? 여러 선택기에 대한

출처

2013-11-21 user2142185