5

一度に 2 つのリスト項目を表示し、毎秒すべてを表示するには自動スクロールする必要がありますn。

複雑なフォト スライダー プラグインはたくさんありますが、単純なテキストはどうでしょうか。

ここにフィドルがあります：http://jsfiddle.net/B9DsX/

HTML

<ul>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li>Praesent commodo nisi eu sapien</li>
    <li>Fusce tempor, sapien vitae tempus dapibus</li>
    <li>Aenean pulvinar urna vel tortor</li>
    <li>Proin turpis tellus, fringilla eget molestie nec</li>
    <li>Etiam sed varius lacus</li>
    <li>Aenean facilisis tincidunt massa luctus feugiat</li>
    <li>Etiam suscipit vel erat sit amet fringilla</li>
    <li>Nulla sit amet eros mauris.</li>
</ul>

CSS

ul {
    overflow-y: hidden;
    overflow-x: scroll;
    white-space: nowrap;
    padding:30px 0;
    margin:0;
}
li {
    display:inline;
    border:1px solid #ccc;
    padding:10px;
    margin:10px;
    list-style-type:none;
}
4

4 に答える 4

2

リスト項目を無限にスクロールする単純なプラグイン関数を次に示します。

一度に 2 つずつ更新:

$.fn.scrollList = function (delay) {
    delay = delay || 2000;
    var animateList = function ($list) {
        //get first child
        var $first = $list.children('li:first');
        var width = $first.outerWidth(true);
        //animate first two off the screen
        $first.animate({
            'margin-left': $list.width() * -1
        },
        // on animation complete
        function () {
            //reset and move to the end of the list
            $(this).css('margin-left', 0).add($(this).next()).appendTo($list);
            //start again after delay
            setTimeout(function () {
                animateList($list)
            }, delay);
        });
    };

    return this.each(function () {
        var $that = $(this)
        setTimeout(function () {
            animateList($that);
        }, delay);
    });

};

次のように呼び出すことができます。

$('.container ul').scrollList();

ここにデモフィドルがあります

正しく動作させるには、いくつかの特定のスタイルが必要であることに注意してくださいmargin-left:0。

<li>また、タグ間の余分なスペースを避けるために、タグ間の空白を削除する必要があります。これを行うさまざまな方法については、この回答を確認してください

于 2013-09-05T07:14:09.497 に答える
1

確かに、これはまさにあなたが求めていたものではありませんが、すぐに作成できました。これはフェーダーのようなものですが、気にしないでください。必要に応じてアニメイトをサブできます。コンテナーの幅を別のサイズに設定して、これを試してください。

 var i = 0,
    container = $('ul li','.container');
    container.hide();
       (function fadeIt() {
         container.eq(i).fadeIn(2000).fadeOut(100, function() {
           i++;
           if(i % container.length == 0) {
             i = 0;
           }
          fadeIt();
        });
      }());
于 2013-09-05T05:56:22.040 に答える
1

写真のスライドショーで使用されるトリックは、単純なテキストでも使用できます。一部のスライドショーでは、相対 - 絶対配置のトリックを使用しています。これが私のやり方です：

.slideshow {
    position: relative;
    overflow: hidden;
}
.slideshow li {
    display: none;
    width: 50%;
}
.slideshow li.current {
    display: block;
    float: left;
}
.slideshow li.fadein {
    display: block;
    position: absolute;
    top: 0;
}

$(function() {
    // make the first two slides "current"
    $(".slideshow li:lt(2)").addClass("current");
    setInterval(function() {
        var current = $(".slideshow .current"); // current slides
        var slidein = $(".slideshow .current:last ~ li:lt(2)"); // next slides
        if (slidein.length == 0) {
            slidein = $(".slideshow li:lt(2)");
        }
        slidein.addClass("fadein"); // make visible, absolutely positioned
        slidein.eq(0).css({ left: "100%" }).animate({ left: 0 });
        slidein.eq(1).css({ left: "150%" }).animate({ left: "50%" }, function() {
            // reset and animate the "left" property
            // reset classes when animation is complete
            current.removeClass("current");
            slidein.removeClass("fadein").addClass("current");
        });
    }, 2000);
});

デモはこちら

于 2013-09-05T08:39:11.627 に答える