-
在线预览源代码下载
HTML代码：
年
年
年
一个月
一个月
一个月
一个月
一个月
一个月
一个月
一个月
一个月
每一年
每一年
每一年
年
年
年
一个月
一个月
一个月
一个月
一个月
一个月
一个月
一个月
一个月
每一年
每一年
每一年
年
年
年
一个月
一个月
一个月
一个月
一个月
一个月
一个月
一个月
一个月
每一年
每一年
每一年
CSS代码：
UL，李{
衬垫:;
缘：；
列表样式类型：无；
}
{ clearfix：后。
显示块；
内容：；
清楚：两者；
}
{滑块日期
高度：PX；
线高：PX；
背景：# Eee；
显示：内联块；
职位：相对；
}
slider-date.slider-bg李{。
职位：相对；
浮点数：左；
宽度：PX；
左边界：固体PX # DDD；
字体大小：PX；
文本对齐：中心；
}
{ slider-date.slider-bg跨度。
显示：无；
}
李：第一个孩子。slider-date.slider-bg {
左边框：无；
}
slider-date.slider-bar {。
位置：绝对的；
顶部：- PX；
左：；
溢出：隐藏；
高度：PX；
宽度：PX；
}
slider-date.slider-bar UL {。
边距顶部：PX；
背景：# BFE；
颜色：# FFF；
高度：PX；
宽度：PX；
}
slider-date.slider-bar-btn {。
线高：PX；
文本对齐：中心；
位置：绝对；
顶部：- PX；
右：PX；
显示块；
宽度：PX；
高度：PX；
背景：# DACD；
颜色：# FFF；
}
slider-date.slider-bar-btn我{。
显示：内联块；
保证金：PX PX；
宽度：PX；
高度：PX；
背景：# CDE；
}
JS代码：
通过馒头QQ： / /滑动插头
（{函数）；
美元。fn.sliderdate =功能（设置）{
var默认值= {
回调：false为false的默认回调函数
}
如果设置为空，则使用默认值。
var设置=扩展（默认设置）；
this.each（函数（）{（）
插件代码
/ / var $ sliderdate = $（。滑块日期）；
sliderdate = $（var $本）；
VaR sliderbar美元=美元sliderdate.find（。滑杆）；
VaR sliderbtn美元=美元sliderdate.find（。滑动条按钮）；
var = liwid +李； / /单宽度
指定的位置滚动
无功slidertodes =函数（指数）{
最大值
如果（索引>）{
指数=；
}
不能小于最小值
如果（索引<）{
指数=；
}
背景/动画
sliderbar.animate美元（{
宽度：liwid *（指数+）
}）；
回调
如果（设置回调）{
setting.callback（指数）；
}
}；
单击滚动到指定的位置—
sliderdate.on美元（点击'，李
执行滚动方法
SliderToDes（$（this）。指数（））；
}）；
将滚动条拖动到指定位置—
sliderbtn.on美元（'mousedown功能（e）{
var $ = $（这个）；
无功pointx = e.pagex至this.parent（）Width（）；
VaR WID = null；
拖动事件
$（document），（'mousemove功能（EV）{ {）
WID = ev.pagex - pointx
如果（WID >和<）{
sliderbar.css美元（宽
}
}），（'mouseup功能（e）{ }
$（这）了（'mousemove MouseUp）；
VaR指标= math.ceil（WID / liwid）—；
SliderToDes（指数）；
}）；
}）；
}）；
}
}（jQuery）；
$（函数（）{（））
函数A（索引）{
console.log（指数+）；
}
$（#滑块日期）。SliderDate（{一}回调：）；
函数B（索引）{
console.log（指数+）；
}
$（#滑块日期）。SliderDate（{回调：b }）；
函数C（索引）{
console.log（指数+）；
}
$（#滑块日期）。SliderDate（{回调：C }）；
}）；
上面的代码很简单，希望你能喜欢它。