图片滚动

当前版本:V1 最近更新:2013-03-13 组件作者:maczhou

组件说明

基于Prototype的小型图片滚动组件,响应鼠标动作,单击鼠标滚动自定义的宽度或高度,长按鼠标左键快速滚动,支持向左向上滚动以及分页功能。

更新日志

  • 2013/03/13上线并发布

milo版本使用方法

需要引入Milo

<script src="http://ossweb-img.qq.com/images/js/milo/milo-min.js"><!--mce:0--></script>

html代码结构

<div class="wrapper">
    <div id="rollbox">
        <ul class="p-show">
            <li><img src="/wiki/" alt="" width="180" height="80" /></li>
            <li><img src="/wiki/" alt="" width="180" height="80" /></li>
            <li><img src="/wiki/" alt="" width="180" height="80" /></li>
            <li><img src="/wiki/" alt="" width="180" height="80" /></li>
        </ul>
    </div>
    <a id="m_right" title="上一页" href="javascript:void(0)">上一页</a>
    <a id="m_left" title="下一页" href="javascript:void(0)">下一页</a>
</div>

JS调用代码

need("biz.scroll",function(s){
    s.init({
        conId:'rollbox',//内容容器ID
        leftId:'m_right',//左箭头ID
        rightId:'m_left',//右箭头ID
        frameWidth:558,//显示框宽度
        pageSpace:186,//翻页宽度或高度
        autoPlay:true,//自动播放
        position:'left',//播放方向 left为向左,up为向上,设置为up时必须加上翻页高度pageHeight值
        autoPlayTime:2,//自动播放间隔时间(秒)
        dotListId:'do'//是否需要分页
    });
})

DEMO演示

查看演示

基础压缩版本使用方法

压缩版js地址:

<script src="http://ossweb-img.qq.com/images/js/comm/ScrollPic.min.js"><!--mce:1--></script>

html代码

<div class="wrapper">
    <div id="rollbox2">
        <ul class="p-show">
            <li><img src="/wiki/" alt="" width="180" height="80" /></li>
            <li><img src="/wiki/" alt="" width="180" height="80" /></li>
            <li><img src="/wiki/" alt="" width="180" height="80" /></li>
            <li><img src="/wiki/" alt="" width="180" height="80" /></li>
        </ul>
    </div>
    <a id="m_right2" title="上一页" href="javascript:void(0)">上一页</a>
    <a id="m_left2" title="下一页" href="javascript:void(0)">下一页</a>
</div>

JS调用代码

var scroll=new ScrollPic({
conId:'rollbox2',//内容容器ID
leftId:'m_right2',//左箭头ID
rightId:'m_left2',//右箭头ID
frameWidth:558,//显示框宽度
pageWidth:186,//翻页宽度
autoPlay:true,//true为自动播放、false为不自动播放
position:'left',//播放方向 left为向左,up为向上,设置为up时必须加上翻页高度pageHeight值
autoPlayTime:2,//自动播放间隔时间(秒)
dotListId:"do"//是否需要分页
})

DEMO演示

基础压缩版本演示查看演示