자바 스크립트에서 이미지 슬라이더를 만드는 방법

Question

javascript/jquery에 image slider을 구현하고 있습니다.

데모는 이와 같이 작동해야합니다. http://londatiga.net/tutorials/scrollable/
어쨌든 jquery.tools.min.js에 의존하지 않을 것입니다.이 lib가 오래 되었기 때문에 (마지막 업데이트는 약 8 개월 전입니다).
나는 js 코드를 나로 결정했다.

다음 또는 이전 버튼을 클릭하면 이미지를 하나의 항목/이미지 목록으로 이동하고 싶습니다. 스크립트는 항목을 이동 시키지만 다음 항목이 표시되지 않으므로 표시가 매우 엉성합니다.

목록에는 4 개의 이미지가 있습니다. 처음에는 처음 두 이미지 만 표시되고 다음 버튼을 클릭하면 두 번째 이미지와 세 번째 이미지를 표시하고 싶습니다.

실제로 다음 버튼을 클릭해도 스크립트는 첫 번째와 두 번째 이미지 만 표시합니다. 여기 http://jsfiddle.net/xRQBS/5/ 코드 (1)

나는 그것을 해결하는 방법에 어떤 힌트를 : 여기에

데모입니까? 감사

(1) 애니메이션 기능으로

/*global jQuery */ 
(function ($) { 

    var imgs = [ 
    'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSsarNmO4Vdo5QwHfznbyxPmOyiYQ-KmBKUFsgEirvjW6Kbm7tj8w', 
    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfIAfLXj3oK1lso1_0iQploSKsogfJFey3NnR0nSD9AfpWjU7egA', 
    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1dO4FVDDitdS85aLOCsOpQyHHTysDhD4kHQ749bMtNxaj5GMKnA', 
    'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRAPO77sVu-Xk80S_txagySoTq8gKHgeiS63a9TYtKbPpGYVI5X' 
    ]; 

    var $list = $('.list-images'); 

    var $slider = $('.slider'); 

    var slideImage = function (direction) { 
     var unit = 150; 
     var left = parseInt($slider.attr('left'), 10) || 0; 

     left = (direction === 'prev') ? left - 150 : left + 150; 

     $slider.css('left', left + 'px'); 

    }; 

    $(function() { 
     $.each(imgs, function (i, img) { 
      $list.append($('<li>').append($('<img>').attr('src', img))); 
     }); 

     $('body').on('click', '.direction', function() { 
      slideImage($(this).attr('data-tid')); 
     }); 
    }); 


}(jQuery)); 
​ 

Answer 1

:

$slider.animate({'left': left + 'px'}, 1000); 

http://jsfiddle.net/xRQBS/6/

Answer 2

난 당신이 변화가 애니메이션을 더되고 싶어 있으리라 믿고있어. 그렇다면 jQuery의 애니메이션을 살펴보십시오. 이런 식으로 뭔가 :

$slider.animate({left: left + 'px'}); 

그것을 실제로 내가 질문을 고쳐 명확하지 않았다, 당신이 :) 답변에 대한