实现基于jQuery的图片/文字无缝滚动

文章导读：在新的一年中，各位网友都进入紧张的学习或是工作阶段。网学的各位小编整理了网络知识-实现基于jQuery的图片/文字无缝滚动的相关内容供大家参考，祝大家在新的一年里工作和学习顺利！

    你知道jQuery，你也知道图片滚动的效果，但是你知道啥叫无缝滚动不？无缝滚动，就是无缝的滚动！换句话说，无缝滚动就是，图片或者文字下一张下一张地滚动，当滚动到屁股的时候就看到头了，反过来，当滚动到头的时候又能看到屁股了。还是看 DEMO 吧，或许更好理解一些。如你所见，当作为一排图片展示的时候，无缝滚动可以让人有无尽的感觉，页面一下子就充实了。

    因为我也不是刻意去写这个 jQuery 的无缝滚动，所以 JS 也没封装过，只提供了几个基本的参数作修改，只能仅作参考。

HTML 部分：

<div />    <div />        <ul />            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>
    <a id="prev" href="javascript:;">上一个</a>
    <a id="next" href="javascript:;">下一个</a>
</div>

jQuery部分：

$(function() {
    //配置变量
    var config = {
        showNum : 3,    //设置滚动的显示个数
        autoScroll : false,    //是否自动滚动，默认为 false
        autoScrollInterval : 3000    //自动滚动间隔，默认为 3000 毫秒，autoScroll = true 时才有效
    }
    
    var scrollUlWidth = $(''.scroll_ul li'').outerWidth(true),    //单个 li 的宽度
        scrollUlLeft = 0,    //.scroll_ul 初使化时的 left 值为 0
        prevAllow = true,    //为了防止连续点击上一页按钮
        nextAllow = true;    //为了防止连续点击下一页按钮
        
    //计算父容量限宽
    $(''.scroll_list'').width(config.showNum * scrollUlWidth);

    //点击上一页
    $(''#prev'').click(function() {
        if (prevAllow) {
            prevAllow = false;
            scrollUlLeft = scrollUlLeft - scrollUlWidth;
            $(''.scroll_ul'').css(''left'', scrollUlLeft);
            //复制最后一个 li 并插入到 ul 的最前面
            $(''.scroll_ul li:last'').clone().prependTo(''.scroll_ul'');
            //删除最后一个 li
            $(''.scroll_ul li:last'').remove();
            $(''.scroll_ul'').animate({
                left : scrollUlLeft + scrollUlWidth
            }, 300, function() {
                scrollUlLeft = parseInt($(''.scroll_ul'').css(''left''), 10);
                prevAllow = true;
            })
        }
    });
    
    //点击下一页
    $(''#next'').click(function() {
        if (nextAllow) {
            nextAllow = false;
            $(''.scroll_ul'').animate({
                left : scrollUlLeft - scrollUlWidth
            }, 300, function() {
                scrollUlLeft = parseInt($(''.scroll_ul'').css(''left''), 10);
                scrollUlLeft = scrollUlLeft + scrollUlWidth;
                $(''.scroll_ul'').css(''left'', scrollUlLeft);
                //复制第一个 li 并插入到 ul 的最后面
                $(''.scroll_ul li:first'').clone().appendTo(''.scroll_ul'');
                //删除第一个 li
                $(''.scroll_ul li:first'').remove();
                nextAllow = true;
            })
        }
    });
    
    //自动滚动
    if (config.autoScroll) {
        setInterval(function() {
            $(''#next'').trigger(''click'');
        }, config.autoScrollInterval)
    }
})

    基本原理和使用方法都写在注释里了，我也就不多作解释了。最后说一句，google、百度上搜一下就知道，已经有大把大把写好的横的竖的无缝的滚动，总有一款适合你，但是我觉得，只有自己亲自写的才最适合自己的需要，所以就有了以上代码。

文章转自：http://wange.im/marquee-scroll.html