2

私はimage sliderjavascript/jqueryに実装しています。

デモはこのように動作するはずです。 http://londatiga.net/tutorials/scrollable/
とにかく、このライブラリは古くなっているため、jquery.tools.min.js に依存するつもりはありません (最後の更新は約 8 か月前です)。
私は自分でjsコードを作ることにしました。

次または前のボタンをクリックすると、1つのアイテム/画像のリストで画像をシフトしたいと思います。スクリプトはアイテムをシフトしますが、次のアイテムが表示されないため、表示はかなりお粗末です。

リストは4枚の画像で構成されています。最初は最初の 2 つの画像のみが表示され、[次へ] ボタンをクリックすると、2 番目と 3 番目の画像が表示されます。

実際には、次のボタンをクリックしても、スクリプトは最初と 2 番目の画像だけを表示します。

デモは次のとおりです: 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 の animate を見てみましょう。このようなもの：

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

これにより、スライド効果が得られます。これは、あなたが望んでいると私が想定しているものです:)

于 2012-10-31T18:17:20.367 に答える