微工具集

SliderBar滑块控件介绍

点击下载：

当前版本：v5.0

说明：从版本5.0开始，进支持单个块滚动，对于多个情况，循环输出中把多个内容放在一个块中。

使用简单，添加样式和js引用即可

<link href='/Scripts/SliderBar/SliderBar5.0.min.css' rel='stylesheet' />
<script src='/Scripts/SliderBar/SliderBar5.0.min.js'></script>

演示实例：

一、水平方向滚动

无间歇滚动，支持手机触屏滚动

JS代码
$('#sliderOne').sliderBar({
    autoSize: false,//是否自动适应宽度高度
    itemWidth: 1108,
    itemHeight: 622,
    showBtn: true,
    loopRun: true,
    autoRun: true,
});
HTML代码
<div id="sliderOne" class="sliderBar" data-index="0">
    <div class="sliderContainer">
        <ul class="slider">
            <li>
                <a href="http://www.jnqianle.cn">
                    <img src="~/Content/Images/1.jpg" />
                </a>
            </li>
            <li>
                <a href="http://www.jnqianle.cn">
                    <img src="~/Content/Images/2.jpg" />
                </a>
            </li>
            <li>
                <a href="http://www.jnqianle.cn">
                    <img src="~/Content/Images/3.jpg" />
                </a>
            </li>
            <li>
                <a href="http://www.jnqianle.cn">
                    <img src="~/Content/Images/4.jpg" />
                </a>
            </li>
        </ul>
    </div>
</div>
水平方向滚动，支持手机版触摸切换
二、垂直方向滚动

垂直方向滚动

JS代码
//*********************5.0  添加垂直方向隙滚动 支持手机版触屏*****************
$('#sliderTwo').sliderBar({
    itemWidth: winWidth,
    itemHeight: height,
    showBtn: true,
    loopRun: true,
    autoRun: true,
    autoRunTime: 3000,
    markingType: 'circle',
    showType: 'vertical',
    runType: 'single'
});
HTML代码，同上

垂直方向滚动

垂直方向滚动，常见滚动消息效果

$('#sliderThree').sliderBar({
    itemWidth: winWidth,
    itemHeight: 35,
    showBtn: false,
    loopRun: true,
    autoRun: true,
    showMarking: false,
    autoRunTime: 3000,
    markingType: 'circle',
    showType: 'vertical',
    runType: 'single',
});

参数配置详细：

/*
*  常用切换空间5.0
* 注：从5.0开始使用CSS3特性，放弃IE浏览器低版本10以下兼容
*/

/*
*1.取消 多滑块功能
*2.代码重构
*3.添加上下切换方式
*4.添加无间隙 滚动方式,设置滑块标示js生成
*5.添加是否总是显示按钮‘alwaysShowBtn’=false
*6.修改渐变显示的链接bug
*/
        //默认参数设置
        var defaults = {
            autoSize: false,//是否自动随浏览器变更大小
            itemWidth: 450,//每一项的宽和高
            itemHeight: 200,
            maxWidth: 50000,//判断是否设置最大宽度
            btnHorizontalMargin: 20,//切换按钮 距离两边的距离
            displayCount: 1,//可显示的个数
            markingSite: 'center',//标示按钮位置 'center':居中,left:居左,right:居右
            markingType: 'number',//标示按钮的类型，默认number，还有circle,square
            markingMarginBottom: 10,//标示按钮到底部的距离

            showType: 'horizontal',//指定切换方式,horizontal:水平切换，vertical:垂直切换,opacity:渐变切换
            runType: 'gapless',//指定滚动方式，gapless 无间隙滚动, single 简单单方向滚动
            direction: 'rtl',//指定默认滚动的方向 ltr--左向右，rtl---右向左
            showTime: 1000,//指定 切换的时间间隔
            showBtn: true,//指定是否显示切换按钮
            alwaysShowBtn: false,//是否总是显示切换按钮
            showMarking: true,//是否显示 标示按钮:数字按钮，圆圈按钮
            loopRun: false,//指示是否循环播放
            autoRun: false, //指明是否自动滚动 
            autoRunTime: 2500,//指定 自动滚动时间间隔

            runHandler: function (index) { },//开始切换时候的事件
            leftHandler: function (index) { },
            rightHandler: function (index) { }
        }