工作中經常會用到輪播圖，這裡記載兩種輪播圖，供大家參考

一、自動播放的無縫輪播圖（一張圖片佔滿屏）

首先是HTML，

<div class='bannerCon'>
        <ul class="bannerContainer" id="bannerContainer">
            <li class="banner"><img src="../imgs/banner1.png" alt=""></li>
            <li class="banner"><img src="../imgs/banner2.png" alt=""></li>
            <li class="banner"><img src="../imgs/banner3.png" alt=""></li>
            <li class="banner"><img src="../imgs/banner4.png" alt=""></li>
            <li class="banner"><img src="../imgs/banner5.png" alt="" ></li>
        </ul>
        <div class="bannerTip">
            <ul class="bannerUL" id="bannerTip"></ul>
        </div>
</div>
 

下面是樣式表：

.bannerCon{
    overflow:hidden;
    width:100%;
    position:relative;
}
.bannerContainer{
    position:relative;
}
.bannerContainer li{
    float:left;
}
.bannerContainer li img{
    width:100%;
}
.bannerTip{
    position:absolute;
    top:600px;
    left:0;
    width:100%;
    z-index: 1;
}
.bannerTip .bannerUL{
    margin:0 auto;
    width:100%;
    text-align: center;
}
.bannerTip .bannerUL li{
    /*float:left;*/
    display: inline-block;
    margin-right:20px;
    border-radius:50%;
    width:16px;
    height:16px;
    background-color:rgba(0,0,0,0.3);
}
.bannerTip .bannerUL li.activeLi{
    width:52px;
    border-radius: 8px;
    background-color:#fff;
}
 

下面是js部分，也是核心，註解寫的很詳細了，應該沒什麼問題了

$(function () {
  let windowWidth=document.body.clientWidth;//獲取螢幕寬度
  let childNum=$('#bannerContainer').children('li').length;//獲取子節點個數
  let listWidth=windowWidth*childNum; 
  $("#bannerContainer li").css('width',windowWidth);//設定li的寬
  $("#bannerContainer").css('width',listWidth);//設定ul的寬
//根據圖片張數建立小圖示 
  for(let  x = 1;x <= childNum;x++){
    $("#bannerTip").append("<li>"+x+"</li>");
    $("#bannerTip li").first().addClass("active")
  }

  // 獲取第一張圖片的節點物件
  let firstImg = $('#bannerContainer li').first().clone();
  childNum=childNum+1;
// 新增到最後的位置 並設定 ul 的寬度
  $('#bannerContainer').append(firstImg).width(childNum * windowWidth);
  let i = 0;
  let timer;

// 移動圖片
  function moveImg() {

    // 最後一張
    if (i === childNum) {
      $('#bannerContainer').css({
        left: 0
      });
      i = 1;
      // console.log('最後一張')
      // console.log(i)
    }


    // 移動圖片動畫
    $('#bannerContainer').stop().animate({
      left: i * -windowWidth
    }, 1000);
    
    // // 換一下每個圖片的小標記
    if (i === (childNum - 1)) {
      $('#bannerTip li').eq(0).addClass('active').siblings().removeClass('active');
    } else {
      $('#bannerTip li').eq(i).addClass('active').siblings().removeClass('active');
    }
  }


// 點選小標記，跳轉到指定的圖片
  $('#bannerTip li').click(function() {
    i = $(this).index();
    moveImg();
  });

//自動播放
  function autoPlay() {
    timer = setInterval(function() {
      i++;
      moveImg();
    }, 3000);
  }

  autoPlay();

// 滑鼠移入幻燈片清除定時器
  $('#bannerContainer').mouseover(function() {
    clearInterval(timer)
  }).mouseout(function() {
    // 滑鼠離開重新播放
    autoPlay();
  })

});
 

好了，到這輪播圖就完成了

二、手動切換的無縫輪播圖（螢幕同時顯示幾張圖片）

首先是html部分

<img src='../imgs/left.png' class='toLeft' id='toLeft'>
<div class='bannerCon'>
       <ul class="bannerContainer" id="bannerContainer">
            <li class="banner"><img src="../imgs/banner1.png" alt=""></li>
            <li class="banner"><img src="../imgs/banner2.png" alt=""></li>
            <li class="banner"><img src="../imgs/banner3.png" alt=""></li>
            <li class="banner"><img src="../imgs/banner4.png" alt=""></li>
            <li class="banner"><img src="../imgs/banner5.png" alt="" ></li>
        </ul>
</div>
<img src='../imgs/right.png' class='toRight' id='toRight'>

下面是樣式表

.bannerCon{
  float:left;
  width:900px;
  overflow:hidden;
}
.bannerContainer{
  position:retive;
  margin:0 auto;
}
.bannerContainer li{
  float:left;
  width:290px;
  height:290px;
  margin-right:10px;
}
.bannerContainer li img{
  width:100%;
  height:100%;
}
.toLeft{
  float:left;
  margin-right:20px;
  margin-top:150px;
}
.toRight{
  float:left;
  margin-left:20px;
  margin-top:150px;
}

接下來就是js部分，也是核心部分

$(function () {
  let imgWidth=300;//圖片寬度
  let imgNum=$('#smallBanner').children('li').length;//圖片總數


  // 複製所有圖片節點物件
  let colneImage = $('#smallBanner li').clone();
  listNum=listNum*2;
// 新增到最後的位置 並設定 ul 的寬度
  $('#bannerContainer').append(colneImage).css('width',imgNum*imgWidth);

  let n = 0;

// 向左
  $('#toLeft').click(function() {
    moveImage(++n);
  });
// 向右
  $('#toRight').click(function() {
    moveImage(--n);
  });


// 移動圖片
  function moveImage() {


    // 最後一張
    if (n === imgNum/2+1) {
      $('#bannerContainer').css({
        left: 0
      })
      n = 1;
      // console.log('最後一張')
      // console.log(i)
    }

    // 是第一張的時候
    if (n === -1) {
      n = imgNum/2 -1;
      $('#bannerContainer').css({
        left: (imgNum/2 ) * -imgWidth
      });
    }

    // 移動圖片動畫
    $('#bannerContainer').stop().animate({
      left: n * -imgWidth
    }, 1000);
  }

});

到這也就完成了手動切換的無縫輪播圖

當然也可以把手動切換和自動播放放一起，只要稍微修改一下就可以了。這兩種方式是直接寫到頁面上的，不是外掛，如果需要外掛，可以自己封裝一下。