<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>   <!--互動(dòng)層-->   <div class="slider-bar">    <ul class="slider-bg clearfix">     <li><span>個(gè)月</span></li>     <li><span>個(gè)月</span></li>     <li><span>個(gè)月</span></li>     <li><span>個(gè)月</span></li>     <li><span>個(gè)月</span></li>     <li><span>個(gè)月</span></li>     <li><span>個(gè)月</span></li>     <li><span>個(gè)月</span></li>     <li><span>個(gè)月</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>   <!--互動(dòng)層-->   <div class="slider-bar">    <ul class="slider-bg clearfix">     <li><span>個(gè)月</span></li>     <li><span>個(gè)月</span></li>     <li><span>個(gè)月</span></li>     <li><span>個(gè)月</span></li>     <li><span>個(gè)月</span></li>     <li><span>個(gè)月</span></li>     <li><span>個(gè)月</span></li>     <li><span>個(gè)月</span></li>     <li><span>個(gè)月</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>   <!--互動(dòng)層-->   <div class="slider-bar">    <ul class="slider-bg clearfix">     <li><span>個(gè)月</span></li>     <li><span>個(gè)月</span></li>     <li><span>個(gè)月</span></li>     <li><span>個(gè)月</span></li>     <li><span>個(gè)月</span></li>     <li><span>個(gè)月</span></li>     <li><span>個(gè)月</span></li>     <li><span>個(gè)月</span></li>     <li><span>個(gè)月</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;    }

//滑動(dòng)插件 by - mantou qq:  ; (function ($) {   $.fn.sliderDate = function (setting) {    var defaults = {     callback: false //默認(rèn)回調(diào)函數(shù)為false    }    //如果setting為空，就取default的值    var setting = $.extend(defaults, setting);    this.each(function () {     //插件實(shí)現(xiàn)代碼     //var $sliderDate = $(".slider-date");     var $sliderDate = $(this);     var $sliderBar = $sliderDate.find(".slider-bar");     var $sliderBtn = $sliderDate.find(".slider-bar-btn");     var liWid = + ; //單個(gè)li的寬度     //滾動(dòng)指定的位置     var sliderToDes = function (index) {      //最大不能超過      if (index > ) {       index = ;      }      //最小不能小于       if (index < ) {       index = ;      }      //背景動(dòng)畫      $sliderBar.animate({       "width": liWid * (index + )      }, );      //執(zhí)行回調(diào)      if (setting.callback) {       setting.callback(index);      }     };     //點(diǎn)擊 - 滾動(dòng)到指定位置     $sliderDate.on('click', "li", function (e) {      //執(zhí)行滾動(dòng)方法      sliderToDes($(this).index());     });     //拖動(dòng) - 滾動(dòng)到指定位置     $sliderBtn.on('mousedown', function (e) {      var $this = $(this);      var pointX = e.pageX - $this.parent().width();      var wid = null;      //拖動(dòng)事件      $(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 });  });