5

我需要一次显示两个列表项并自动滚动以每秒查看所有项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

我只是做了一个快速的小提琴。这可行，但滚动不是很平滑，边缘li是可见的，但你明白了。看演示

var liNum = 1;
var timerID;
var maxLi = 0;

$(function () {
    timerID = setInterval(scrollLi, 1000); //use 2500 for animation
    maxLi = $(".container ul li").length;
});

function scrollLi() {
    if (liNum >= maxLi) { //reset
        $(".container ul").scrollLeft(0);
        // use this for animation instead
        // $(".container ul").animate({scrollLeft: 0}, 1000);
        liNum = 1;
        //clearInterval(timerID);

    } else { //scroll next two li width
        var x = $(".container ul li:nth-child(" + liNum + ")").outerWidth(true);
        liNum++;
        x += $(".container ul li:nth-child(" + liNum + ")").outerWidth(true);
        liNum++;
        $(".container ul").scrollLeft($(".container ul").scrollLeft() + x);
        // use this line for animation instead
        // $(".container ul").animate({scrollLeft: $(".container ul").scrollLeft() + x}, 1500);
    }
}

更新：如果你想隐藏使用滚动条overflow: hidden并使其滚动流畅，你可以使用animate()如本次更新演示中所示。请注意，我已经更改了动画持续时间和间隔。还提到了上述代码中的更改作为注释。你应该玩弄它，看看什么更适合你的需求。

于 2013-09-05T05:52:21.883 回答
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 回答