基于jQuery滑动杆实现购买日期选择效果

<center>  <div class="slider-date" id="slider-date-">   <!--底层-->   <ul class="slider-bg clearfix">    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li>年</li>    <li>年</li>    <li>年</li>   </ul>   <!--互动层-->   <div class="slider-bar">    <ul class="slider-bg clearfix">     <li><span>个月</span></li>     <li><span>个月</span></li>     <li><span>个月</span></li>     <li><span>个月</span></li>     <li><span>个月</span></li>     <li><span>个月</span></li>     <li><span>个月</span></li>     <li><span>个月</span></li>     <li><span>个月</span></li>     <li>年<span>年</span></li>     <li>年<span>年</span></li>     <li>年<span>年</span></li>    </ul>    <!--滑块按钮-->    <a href="javascript:;" class="slider-bar-btn"><i></i><i></i></a>   </div>  </div>  <br />  <br />  <div class="slider-date" id="slider-date-">   <!--底层-->   <ul class="slider-bg clearfix">    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li>年</li>    <li>年</li>    <li>年</li>   </ul>   <!--互动层-->   <div class="slider-bar">    <ul class="slider-bg clearfix">     <li><span>个月</span></li>     <li><span>个月</span></li>     <li><span>个月</span></li>     <li><span>个月</span></li>     <li><span>个月</span></li>     <li><span>个月</span></li>     <li><span>个月</span></li>     <li><span>个月</span></li>     <li><span>个月</span></li>     <li>年<span>年</span></li>     <li>年<span>年</span></li>     <li>年<span>年</span></li>    </ul>    <!--滑块按钮-->    <a href="javascript:;" class="slider-bar-btn"><i></i><i></i></a>   </div>  </div>  <br />  <br />  <div class="slider-date" id="slider-date-">   <!--底层-->   <ul class="slider-bg clearfix">    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li>年</li>    <li>年</li>    <li>年</li>   </ul>   <!--互动层-->   <div class="slider-bar">    <ul class="slider-bg clearfix">     <li><span>个月</span></li>     <li><span>个月</span></li>     <li><span>个月</span></li>     <li><span>个月</span></li>     <li><span>个月</span></li>     <li><span>个月</span></li>     <li><span>个月</span></li>     <li><span>个月</span></li>     <li><span>个月</span></li>     <li>年<span>年</span></li>     <li>年<span>年</span></li>     <li>年<span>年</span></li>    </ul>    <!--滑块按钮-->    <a href="javascript:;" class="slider-bar-btn"><i></i><i></i></a>   </div>  </div> </center>

ul, li {   padding: ;   margin: ;   list-style-type: none;  }  .clearfix:after {   display: block;   content: "";   clear: both;  }  .slider-date {   height: px;   line-height: px;   background: #eee;   display: inline-block;   position: relative;  }   .slider-date .slider-bg li {    position: relative;    float: left;    width: px;    border-left: solid px #ddd;    font-size: px;    text-align: center;   }   .slider-date .slider-bg span {    display: none;   }   .slider-date .slider-bg li:first-child {    border-left: none;   }   .slider-date .slider-bar {    position: absolute;    top: -px;    left: ;    overflow: hidden;    height: px;    width: px;   }    .slider-date .slider-bar ul {     margin-top: px;     background: #bfe;     color: #fff;     height: px;     width: px;    }   .slider-date .slider-bar-btn {    line-height: px;    text-align: center;    position: absolute;    top: -px;    right: px;    display: block;    width: px;    height: px;    background: #dacd;    color: #fff;   }    .slider-date .slider-bar-btn i {     display: inline-block;     margin: px px;     width: px;     height: px;     background: #cde;    }

//滑动插件 by - mantou qq:  ; (function ($) {   $.fn.sliderDate = function (setting) {    var defaults = {     callback: false //默认回调函数为false    }    //如果setting为空，就取default的值    var setting = $.extend(defaults, setting);    this.each(function () {     //插件实现代码     //var $sliderDate = $(".slider-date");     var $sliderDate = $(this);     var $sliderBar = $sliderDate.find(".slider-bar");     var $sliderBtn = $sliderDate.find(".slider-bar-btn");     var liWid = + ; //单个li的宽度     //滚动指定的位置     var sliderToDes = function (index) {      //最大不能超过      if (index > ) {       index = ;      }      //最小不能小于       if (index < ) {       index = ;      }      //背景动画      $sliderBar.animate({       "width": liWid * (index + )      }, );      //执行回调      if (setting.callback) {       setting.callback(index);      }     };     //点击 - 滚动到指定位置     $sliderDate.on('click', "li", function (e) {      //执行滚动方法      sliderToDes($(this).index());     });     //拖动 - 滚动到指定位置     $sliderBtn.on('mousedown', function (e) {      var $this = $(this);      var pointX = e.pageX - $this.parent().width();      var wid = null;      //拖动事件      $(document).on('mousemove', function (ev) {       wid = ev.pageX - pointX       if (wid > && wid < ) {        $sliderBar.css("width", wid);       }      }).on('mouseup', function (e) {       $(this).off('mousemove mouseup');       var index = Math.ceil(wid / liWid) - ;       sliderToDes(index);      });     });    });   }  })(jQuery);  $(function () {   function a(index) {    console.log(index + );   }   $("#slider-date-").sliderDate({ callback: a });   function b(index) {    console.log(index + );   }   $("#slider-date-").sliderDate({ callback: b });   function c(index) {    console.log(index + );   }   $("#slider-date-").sliderDate({ callback: c });  });