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代码
//*********************5.0  添加无间隙滚动 支持手机版触屏*****************
var winWidth = $('#sliderOne').parents('.panel-body').width();
var height = winWidth / 1366 * 768;
$('#sliderOne').sliderBar({
    width: winWidth,
    height: height,
    containerWidth: winWidth,
    containerHeight: height,
    itemWidth: winWidth,
    itemHeight: height,
    showBtn: true,//是否显示切换按钮
    loopRun: true,
    autoRun: true,//是否自动滚动
    autoRunTime: 5000,//指定时间间隔
    markingType: 'circle',
    showType: 'horizontal',//指定变换方向
});
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/3.jpg" />
                </a>
            </li>
        </ul>
    </div>
</div>
水平方向滚动,支持手机版触摸切换
二、垂直方向滚动

垂直方向滚动

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

垂直方向滚动

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

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