javascript - 如何在 javascript 中制作图像 slider

Question

我正在 javascript/jquery 中实现图像 slider 。

演示应该像这样工作。 http://londatiga.net/tutorials/scrollable/
无论如何，我不会依赖 jquery.tools.min.js，因为这个库已经过时了(最后一次更新是大约 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/