websjy 发表于 2016-7-29 18:48:45

jQuery cxScroll 间歇式无缝滚动


jQuery cxScroll 间歇式无缝滚动

[*]版本:
[*]jQuery v1.7+
[*]jQuery cxScroll v1.2.2
[*]注意事项:
[*]内部会自动创建 prev 及 next 切换按钮,也可以在外部直接创建,若外部已创建或设置prevBtn: false及nextBtn: false,内部将跳过此步骤;
[*]若(滚动的列表宽度 ≤ 父元素的宽度),则不会自动创建 prev 及 next 切换按钮,也不会自动滚动。
[*]github地址
在线实例实例预览 基础示例实例预览 参数示例实例预览 API 接口



<!DOCTYPE html>
<html>
        <head>
                <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
                <link rel="stylesheet" href="//ku.shouce.ren/libs/cxscroll/1.2.2/css/layout.css">
                <script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js">
                </script>
                <script src="//ku.shouce.ren/libs/cxscroll/1.2.2/js/jquery.cxscroll.min.js">
                </script>
        </head>
        <body>
                <div class="main">
                        <div class="inwrap">
                                <h1>jQuery cxScroll 间歇式无缝滚动
                                </h1>
                                <h2>示例
                                </h2>
                                <div class="example">
                                        <h3>横向滚动 right
                                        </h3>
                                        <div id="pic_list_1" class="scroll_horizontal">
                                                <div class="box">
                                                        <ul class="list">
                                                                <li>
                                                                        <img src="//ku.shouce.ren/libs/cxscroll/1.2.2/img/temp_pic_1.jpg">
                                                                </li>
                                                                <li>
                                                                        <img src="//ku.shouce.ren/libs/cxscroll/1.2.2/img/temp_pic_2.jpg">
                                                                </li>
                                                                <li>
                                                                        <img src="//ku.shouce.ren/libs/cxscroll/1.2.2/img/temp_pic_3.jpg">
                                                                </li>
                                                                <li>
                                                                        <img src="//ku.shouce.ren/libs/cxscroll/1.2.2/img/temp_pic_4.jpg">
                                                                </li>
                                                                <li>
                                                                        <img src="//ku.shouce.ren/libs/cxscroll/1.2.2/img/temp_pic_5.jpg">
                                                                </li>
                                                        </ul>
                                                </div>
                                        </div>
                                        <h3>横向滚动 left
                                        </h3>
                                        <div id="pic_list_2" class="scroll_horizontal">
                                                <div class="box">
                                                        <ul class="list">
                                                                <li>
                                                                        <img src="//ku.shouce.ren/libs/cxscroll/1.2.2/img/temp_pic_1.jpg">
                                                                </li>
                                                                <li>
                                                                        <img src="//ku.shouce.ren/libs/cxscroll/1.2.2/img/temp_pic_2.jpg">
                                                                </li>
                                                                <li>
                                                                        <img src="//ku.shouce.ren/libs/cxscroll/1.2.2/img/temp_pic_3.jpg">
                                                                </li>
                                                                <li>
                                                                        <img src="//ku.shouce.ren/libs/cxscroll/1.2.2/img/temp_pic_4.jpg">
                                                                </li>
                                                                <li>
                                                                        <img src="//ku.shouce.ren/libs/cxscroll/1.2.2/img/temp_pic_5.jpg">
                                                                </li>
                                                        </ul>
                                                </div>
                                        </div>
                                </div>
                                <div class="example clearfix">
                                        <div class="incol">
                                                <h3>垂直滚动 bottom
                                                </h3>
                                                <div id="pic_list_3" class="scroll_vertical">
                                                        <div class="box">
                                                                <ul class="list">
                                                                        <li>
                                                                                <img src="//ku.shouce.ren/libs/cxscroll/1.2.2/img/temp_pic_1.jpg">
                                                                        </li>
                                                                        <li>
                                                                                <img src="//ku.shouce.ren/libs/cxscroll/1.2.2/img/temp_pic_2.jpg">
                                                                        </li>
                                                                        <li>
                                                                                <img src="//ku.shouce.ren/libs/cxscroll/1.2.2/img/temp_pic_3.jpg">
                                                                        </li>
                                                                        <li>
                                                                                <img src="//ku.shouce.ren/libs/cxscroll/1.2.2/img/temp_pic_4.jpg">
                                                                        </li>
                                                                        <li>
                                                                                <img src="//ku.shouce.ren/libs/cxscroll/1.2.2/img/temp_pic_5.jpg">
                                                                        </li>
                                                                </ul>
                                                        </div>
                                                </div>
                                        </div>
                                        <div class="incol">
                                                <h3>垂直滚动 top
                                                </h3>
                                                <div id="pic_list_4" class="scroll_vertical">
                                                        <div class="box">
                                                                <ul class="list">
                                                                        <li>
                                                                                <a href="#">
                                                                                        <img src="//ku.shouce.ren/libs/cxscroll/1.2.2/img/temp_pic_1.jpg">
                                                                                </a>
                                                                        </li>
                                                                        <li>
                                                                                <a href="#">
                                                                                        <img src="//ku.shouce.ren/libs/cxscroll/1.2.2/img/temp_pic_2.jpg">
                                                                                </a>
                                                                        </li>
                                                                        <li>
                                                                                <a href="#">
                                                                                        <img src="//ku.shouce.ren/libs/cxscroll/1.2.2/img/temp_pic_3.jpg">
                                                                                </a>
                                                                        </li>
                                                                        <li>
                                                                                <a href="#">
                                                                                        <img src="//ku.shouce.ren/libs/cxscroll/1.2.2/img/temp_pic_4.jpg">
                                                                                </a>
                                                                        </li>
                                                                        <li>
                                                                                <a href="#">
                                                                                        <img src="//ku.shouce.ren/libs/cxscroll/1.2.2/img/temp_pic_5.jpg">
                                                                                </a>
                                                                        </li>
                                                                </ul>
                                                        </div>
                                                </div>
                                        </div>
                                </div>
                        </div>
                </div>
                <script>
                        $("#pic_list_1").cxScroll();
                        $('#pic_list_2').cxScroll({
                                direction: 'left'
                        }
                                                                       );
                        $('#pic_list_3').cxScroll({
                                direction: 'bottom'
                        }
                                                                       );
                        $('#pic_list_4').cxScroll({
                                direction: 'top'
                        }
                                                                       );
                </script>
        </body>
</html>



websjy 发表于 2016-7-29 18:50:24

一款基于jQuery的无缝滚动插件,可自定义外观及调用参数,兼容主流浏览器。版本:
[*]jQuery v1.7+
[*]jQuery cxScroll v1.2.2
注意事项:
[*]内部会自动创建 prev 及 next 切换按钮,也可以在外部直接创建,若外部已创建或设置 prevBtn:false 及 nextBtn:false ,内部将跳过此步骤;
[*]若(滚动的列表宽度 ≤ 父元素的宽度),则不会自动创建 prev 及 next 切换按钮,也不会自动滚动。
[*]
文档:http://code.ciaoca.com/jquery/cxscroll/示例:http://code.ciaoca.com/jquery/cxscroll/demo/使用方法CSS 样式结构除必要属性设置外,其他样式均可自行设置。/* 横向滚动基本样式 */
.cxscroll{}
.cxscroll .box{overflow:hidden;width:600px;}
.cxscroll .list{overflow:hidden;width:9999px;}
.cxscroll .list li{float:left;width:200px;height:100px;}
.cxscroll .prev{}
.cxscroll .next{}

/* 纵向滚动基本样式 */
.cxscroll{}
.cxscroll .box{overflow:hidden;height:300px;}
.cxscroll .list{}
.cxscroll .list li{height:100px;}
.cxscroll .prev{}
.cxscroll .next{}
DOM 结构

<div id="element_id" class="cxscroll">
    <div class="box">
      <ul class="list">
            <li></li>
            <li></li>
            ...
            <li></li>
      </ul>
    </div>
    <!-- 控制按钮会自动创建,可省略 -->
    <a class="prev"></a>
    <a class="next"></a>
</div>


调用
$("#element_id").cxScroll();


options 参数说明

名称默认值说明
direction'right'滚动方向。可设置为:"left", "right", "top", "bottom"
easing'swing'缓动方式
step1滚动步长
accel200手动滚动速度 (ms),点击控制按钮滚动的速度。
speed800自动滚动速度 (ms)
time4000自动滚动间隔时间 (ms)
autotrue是否自动滚动
hoverLocktrue鼠标移入移出锁定。鼠标进入区域内时停止自动轮播,离开后恢复自动轮播(仅在 auto 为 true 时有效)
prevBtntrue是否使用 prev 按钮
nextBtntrue是否使用 next 按钮

API接口

var Api;
$('#element_id').cxScroll(function(api){
Api = api;
});
// 或者作为第二个参数传入
$('#element_id').cxScroll({
minus: true,
plus: true
}, function(api){
Api = api;
});



名称说明
play()开始自动播放
stop()停止自动播放
prev(speed)向前滚动。speed 为滚动速度(ms)
next(speed)向后滚动。speed 为滚动速度(ms)




页: [1]
查看完整版本: jQuery cxScroll 间歇式无缝滚动