使用multiscroll.js自动滚动

时间:2015-01-29 11:36:09

标签: jquery html scroll multiscroll.js

我在临时链接上为我的网站测试了multiscroll.js。我想知道是否可以在不使用鼠标或键盘的情况下滚动浏览。图像应该自动滚动。(比如每5秒后它应滚动到下一个块)

我的测试链接是:http://goo.gl/HjkJKx

此页面包含简单的jquery调用

<script type="text/javascript">
     $(document).ready(function() {
            $('#myContainer').multiscroll({
                sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
                anchors: ['first', 'second', 'third'],
                menu: '#menu',
                loopTop: true,
                loopBottom: true
            });
        });
    </script>

and the html is like this:

<ul id="menu">
    <li data-menuanchor="first"><a href="#first">First slide</a></li>
    <li data-menuanchor="second"><a href="#second">Second slide</a></li>
    <li data-menuanchor="third"><a href="#third">Third slide</a></li>
</ul>

<div id="myContainer">

    <div class="ms-left">
        <div class="ms-section" id="left1">
            <h1>Left 1</h1>
        </div>

        <div class="ms-section" id="left2">
            <h1>Left 2 </h1>
        </div>

        <div class="ms-section" id="left3">
            <h1>Left 3</h1>
        </div>
    </div>

    <div class="ms-right">
        <div class="ms-section" id="right1">
            <h1>Right 1</h1>
        </div>

        <div class="ms-section" id="right2">
            <h1>Right 2</h1>
        </div>

        <div class="ms-section" id="right3">
            <h1>Right 3</h1>
        </div>
    </div>  
</div>

1 个答案:

答案 0 :(得分:4)

是。多重滚动有 methods ,可用于此目的。

您可以合并moveSectionDown()setInterval()

function scrollMe() {
    $.fn.multiscroll.moveSectionDown(); 
}
setInterval(scrollMe, 5000);

起诉你设置loopBottom: true

<强> JSFiddle

相关问题