当前版本:v5.0
说明:从版本5.0开始,进支持单个块滚动,对于多个情况,循环输出中把多个内容放在一个块中。
使用简单,添加样式和js引用即可
<link href='/Scripts/SliderBar/SliderBar5.0.min.css' rel='stylesheet' /> <script src='/Scripts/SliderBar/SliderBar5.0.min.js'></script>
无间歇滚动,支持手机触屏滚动
$('#sliderOne').sliderBar({ autoSize: false,//是否自动适应宽度高度 itemWidth: 1108, itemHeight: 622, showBtn: true, loopRun: true, autoRun: true, });
<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>
垂直方向滚动
//*********************5.0 添加垂直方向隙滚动 支持手机版触屏***************** $('#sliderTwo').sliderBar({ itemWidth: winWidth, itemHeight: height, showBtn: true, loopRun: true, autoRun: true, autoRunTime: 3000, markingType: 'circle', showType: 'vertical', runType: 'single' });
垂直方向滚动
垂直方向滚动,常见滚动消息效果
$('#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) { } }