Implement purchase date selection effect based on jQuery sliding bar_jquery

This is a sliding bar purchase date selection plug-in based on jQuery. Its appearance imitates Alibaba Cloud's server purchase date selection interface. This jQuery plug-in is very suitable for use on some virtual product purchase pages. It can help your users quickly select the purchase date of the product, which is very convenient. The rendering is as follows:

Online preview Source code download

html code:

<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>

css code:

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;
    }

js code:

//滑动插件 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 });
  });

The above code is very simple, I hope you will like it.