图片滚动

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

milo版本

在页面中现引入milo库，然后使用milo的need方法引入scroll组件； 关于更详细的milo库使用方法可以查看Milo库使用说明

组件CDN

<!-- PC端milo -->
<script src="//ossweb-img.qq.com/images/js/milo_bundle/milo.js"></script>

<!-- 移动端milo -->
<script src="//ossweb-img.qq.com/images/js/mobile_bundle/milo.js"></script>

效果演示

用法示例： 图片滚动组件

代码示例

<div class='wrapper'>
    <div id='rollbox'>
        <ul class='p-show'>
            <li><img src="//ossweb-img.qq.com/upload/adw/images/1343346696118359979.jpg" width="180" height="80" /></li>
            <li><img src="//ossweb-img.qq.com/upload/adw/images/1343087933232120698.jpg" width="180" height="80" /></li>
            <li><img src="//ossweb-img.qq.com/upload/adw/images/1341273480323387542.jpg" width="180" height="80" /></li>
            <li><img src="//ossweb-img.qq.com/upload/adw/images/1342405635106682919.jpg" width="180" height="80" /></li>
        </ul>
    </div>
    <a href="javascript:void(0)" id="m_right" class='arrow arrow1' title="上一页">上一页</a>
    <a href="javascript:void(0)" id="m_left" class='arrow arrow2' title="下一页">下一页</a>
    <div id="do" class="do"></div>
</div>
<!-- milo 版 -->
<script src="//ossweb-img.qq.com/images/js/milo_bundle/milo.js"></script>
<script>
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'// 是否需要分页
    });
})
</script>

参数说明

• conId : string 内容容器ID，必须
• leftId : string 左箭头 ID，必须
• rightId : string 右箭头 ID，必须
• frameWidth : number 显示框宽度，必须
• pageSpace : number 翻页宽度或高度，必须
• autoPlay : boolean 是否自动播放
• position : string 播放方向 left 为向左，up 为向上,设置为 up 时必须加上翻页高度 pageHeight 值
• autoPlayTime : number 自动播放间隔时间(秒)
• dotListId : string 分页容器ID

独立ScrollPic组件

组件CDN

<script src="//ossweb-img.qq.com/images/js/comm/ScrollPic.min.js"></script>

代码示例

<div class='wrapper'>
    <div id='rollbox'>
        <ul class='p-show'>
            <li><img src="//ossweb-img.qq.com/upload/adw/images/1343346696118359979.jpg" width="180" height="80" /></li>
            <li><img src="//ossweb-img.qq.com/upload/adw/images/1343087933232120698.jpg" width="180" height="80" /></li>
            <li><img src="//ossweb-img.qq.com/upload/adw/images/1341273480323387542.jpg" width="180" height="80" /></li>
            <li><img src="//ossweb-img.qq.com/upload/adw/images/1342405635106682919.jpg" width="180" height="80" /></li>
        </ul>
    </div>
    <a href="javascript:void(0)" id="m_right" class='arrow arrow1' title="上一页">上一页</a>
    <a href="javascript:void(0)" id="m_left" class='arrow arrow2' title="下一页">下一页</a>
    <div id="do" class="do"></div>
</div>
<!-- ScrollPic组件 -->
<script src="//ossweb-img.qq.com/images/js/comm/ScrollPic.min.js"></script>
<script>
var scroll = new ScrollPic({
     conId: 'rollbox', //内容容器ID
     leftId: 'm_right', //左箭头ID
     rightId: 'm_left', //右箭头ID
     frameWidth: '558', //显示框宽度
     pageWidth: '186', //翻页宽度
     autoPlay: true, //自动播放
     position: 'left', //播放方向 left为向左，up为向上,设置为up时必须加上翻页高度pageHeight值
     autoPlayTime: '2', //自动播放间隔时间(秒)
     speed: '20',
     dotListId: "do" //是否需要分页
 })
</script>