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

使用animate功能：

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

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

Answer 2

我假设您希望转变更像是动画。如果是这样，看看jQuery的动画。像这样：

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

这会给它一个滑动效果，这就是我想要你想要的东西：）

如何在javascript中制作图像滑块

2 个答案: