仿网易云轮播图，jq+boot轮播

1. 下了班，放松时间听歌时，发现网易云的轮播图挺好玩，挺简单的一个轮播图，很久之前自己尝试着写过，但是没有成功。今天把坑补上吧。原效果图：
   代码效果图：
2. 思路
   刚开始对轮播的了解就是一个ul列表，里边的轮播内容并列展示，然后通过控制ul的left来让他偏移：
   
   如上图所示，每次便宜一个图片的宽度，如果left小于总的图片宽度，直接将left归0，这种特别的麻烦，而且效果也不好，归0的时候中间会有错误效果；这是我最开始了解轮播的思路。看了看网易云的这个，发现应该不是这样，应该是上边有3个图片，别的图片都在下边隐藏。然后通过控制当前展示的图片还有上一个豫下一个，来实现轮播的效果,结构如下：
   
   这样的话每次只要找到当前的图片他的上一个和下一个就能找到了。

3. 问题：

   1. 图片拖动：
      轮播的图片可以被拖动，img默认是能被拖动的，百度了方法，在鼠标事件中阻止他的默认行为就行了.

      $(“img”).on(“mousedown”,(e)=>{
      e.preventDefault();
      })

   2. 缩略图的展示
      想在鼠标放到圆点的时候增加一个缩略图展示，本来是想手写一个，后台再boot上发现有现成的样式popover，于是看了看文档决定使用，本来是想给圆点一个mouseenter事件，然后直接弹出popover弹出框：
      
      然而，发现第一次hover并没有出现，再次hover是出现了，研究了文档，发现要先初始化对应DOM，然后按照他的初始化的触发方式去触发。只能在拼接DOM的时候先初始化了。不知道有没有别的解决办法，暂时先这样了。

   3. 
      4.贴上核心js代码，要demo的话下边有地址：
      

      /*
          option{
          DOM : 对应元素
          animaterTimer 动画过度时间
          intervalTime 图片切换时间
          imgList : [img1,img2]
          aroundBtn 左右按钮
          bottomBtn 下边按钮
      }
      */
      class imgLunbo{
      constructor(DOM,option){
          this.option = $.extend({
              "animaterTimer" : 1000,
              "intervalTime" : 2000,
              "aroundBtn" : true,
              "bottomBtn" : true,
          },option)
          this.DOM = DOM;
          this.init();
          this.timer;
      }
      init () {
          //拼接html
          this.joinDom();
          //绑定事件
          this.bindEvent();
          //定时轮播
          this.interval_img();
      }
      joinDom () {
          let that = this,
              _html = "",
              btn_circleHtml='';
          //左按钮
          if(that.option.aroundBtn){
              _html += `
                  <div class="left" >
                      <i class="iconfont icon-07jiantouxiangzuofill"></i>
                  </div>
              `;
          }
          //主体图片部分
          _html += `<div class="content"><ul class="imgList">`;
          $.each(that.option.imgList,(i,v)=>{
              if(i == that.option.imgList.length-1){
                  _html += `<li class="prev"><img src="${v}" alt=""></li>`;
              }else if(i == 0){
                  _html += `<li class="now"><img src="${v}" alt=""></li>`;
              }else if(i == 1){
                  _html += `<li class="next"><img src="${v}" alt=""></li>`;
              }else{
                  _html += `<li><img src="${v}" alt=""></li>`;
              }
              btn_circleHtml += `<li class="${i==0?'active':''}" data-img="${v}"></li>`
          })
          _html +=`</ul><ul class="btn_circle">${btn_circleHtml}</ul></div>`;
          //右按钮
          if(that.option.aroundBtn){
              _html += `
                  <div class="right">
                  <i class="iconfont icon-07jiantouxiangyoufill"></i>
              </div>
              `;
          }
          $(that.DOM).html(_html);
      }
      bindEvent(){
          let that = this;
          //初始化popover
          $(".btn_circle li").each((i,v)=>{
              $(v).popover({
                  trigger:'hover', //触发方式
                  placement:'top',
                  html: true, // 为true的话，data-content里就能放html代码了
                  content:`<div class="thumbnail">
                          <img src="${$(v).attr('data-img')}" alt="">
                      </div>`,//这里可以直接写字符串，也可以 是一个函数，该函数返回一个字符串；
              })
          })
          //左右移动
          $(".left,.right").click(function(){
              eval(`that.to${$(this).attr("class")}()`);
          })
          //点击下边圆球
          $(".btn_circle li").click(function(){
              that.start($(".imgList li").eq($(this).index()));
          })
          //绑定对应点击事件 点击图片
          $(".imgList li").on({
              'click':function(){
                  that.start($(this));
              },
              'mouseenter':function(){
                  clearInterval(that.timer)
              },
              'mouseleave':function(){
                  that.interval_img();
              },
          })
          $(".btn_circle li").on({
              'click' : function(){
                  clearInterval(that.timer)
                  that.start($(".imgList li").eq($(this).index()));
                  that.interval_img();
              }
          })
      }
      interval_img(){
          let that = this;
          that.timer = setInterval(()=>{
              that.start(that.nextDom($('.now')));
          },that.option.intervalTime)
      }
      start($dom){
          let num = $dom.index();
          //图片状态改变
          if(!$dom.hasClass("now")){
              $dom.parent().children('.now,.next,.prev').removeClass("now next prev");
              //对应元素添加class
              this.prevDom($dom).addClass("prev");
              $dom.addClass("now");
              this.nextDom($dom).addClass("next");
          }
          //圆点状态改变
          if(!$(".btn_circle li").eq(num).hasClass("active")){
              $(".btn_circle li").eq(num).addClass('active').siblings(".active").removeClass('active');
          }
      }
      prevDom($dom){
          //获取上一个元素
          if($dom.index() == 0) return $dom.parent().children(":last-child");
          return $dom.prev();
      }
      nextDom($dom){
          //获取下一个元素
          if($dom.index() == $dom.siblings().length) return $dom.parent().children(":first-child")
          return $dom.next();
      }
      toleft(){
          this.start(this.prevDom($(".now")))
      }
      toright(){
          this.start(this.nextDom($(".now")))
      }
      }
      function slideShow(option){
      return this.each(function(){
          let $this = $(this),
              slideData = $this.data("slideData");
          if(!slideData){
              $this.data("slideData",(slideData = new imgLunbo(this,option)))
          }
          //调用对应事件
          if(typeof option == 'string'){
              slideData[option] && slideData[option].apply(slideData);
          }
      })
      }
      $.fn.slideShow = slideShow;
      //禁止图片的拖动
      $("img").on("mousedown",(e)=>{
      e.preventDefault();
      })
      
      

4. 现在的并不满意，好几个功能还没有做出来，比如：轮播间隔再小圆点上可以用类似圆形进度条的方式展现出来，DOM结构的话也是比较死板，理想的DOM结构应该是模块化，轮播主题，左右箭头这些都应该是可以调整位置，需要什么拼接什么的，只是项目最近时间比较赶，等过了这段时间再完善吧！源代码已上传到github：点击去下载