2

我image slider在 javascript/jquery 中实现一个。

演示应该像这样工作。 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));
​
4

2 回答 2

1

使用动画功能：

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

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

于 2012-10-31T18:16:46.293 回答
1

我假设您希望这种转变更像是一种动画。如果是这样，请查看 jQuery 的动画。像这样的东西：

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

这会给它一个滑动效果，我假设你想要:)

于 2012-10-31T18:17:20.367 回答