快捷導(dǎo)航

原生JS實現(xiàn)無縫輪播圖片

更新時間：2020年06月24日 16:54:58 作者：weixin_46310510

這篇文章主要為大家詳細(xì)介紹了原生JS實現(xiàn)無縫輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)無縫輪播圖的具體代碼，供大家參考，具體內(nèi)容如下

運動插件

function animove(obj,distance,speed,callback) { //調(diào)用的變量 目標(biāo)距離 速度 回調(diào)函數(shù)
 clearInterval(obj.timer);
 obj.timer = setInterval(function () {
  let step = (distance - obj.offsetLeft) / 10;
  step = step > 0 ? Math.ceil(step) : Math.floor(step);
  if (obj.offsetLeft == distance) {
  clearInterval(obj.timer);
  if (callback) {
   callback();
  }
  }
  obj.style.left = obj.offsetLeft + step + 'px';
 },speed)
}

CSS代碼

 * {
  margin: 0;
  padding: 0;
 }
 ul,li {
  list-style: none;
 }
 .box {
  width: 1226px;
  height: 460px;
  margin: 100px auto;
  position: relative;
  overflow: hidden;
 }
 .pic-box {
  width: 4904px;
  position: absolute;
 }
 .pic-box > li {
  float: left;
 }
 .point {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
 }
 .point > li {
  float: left;
  width: 8px;
  height: 8px;
  border: 1px solid blueviolet;
  margin: 0 4px;
  border-radius: 50%;
 }
 .point > .active {
  background-color: orange;
 }
 .left-btn,
 .right-btn {
  width: 50px;
  height: 40px;
  background-color: rgba(0,0,0,.5);
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
 }
 .left-btn {
  left: 0;
 }
 .right-btn {
  right: 0;
 }

HTML代碼

<div class="box">
 <ul class="pic-box">
  <li>
  <img src="lb.webp" alt="">
  </li>
  <li>
  <img src="lb2.webp" alt="">
  </li>
  <li>
  <img src="pic3.jpg" alt="">
  </li>
 </ul>
 <ul class="point">
 </ul>
 <div class="left-btn"><</div>
 <div class="right-btn">></div>
 </div>
<script src="運動插件.js"></script>

js代碼

let picbox = document.querySelector('.pic-box');
 let pic = document.querySelectorAll('.pic-box > li'); //由于獲取的不是動態(tài)的 所以之后的克隆 并不會使這個變量發(fā)生改變
 let point = document.querySelector('.point');
 let leftbtn = document.querySelector('.left-btn');
 let rightbtn = document.querySelector('.right-btn');
 let carouselindex = 0;
 //通過for循環(huán) 生成小圓點 并將圓點添加到ul里
 for (let i = 0; i < pic.length; i ++) {
  let pointli = document.createElement('li');
  pointli.classList.add(i);
  point.appendChild(pointli);
 }
 //給第一個小圓點默認(rèn)添加active
 point.children[0].classList.add('active');

 //克隆第一個圖片 深度
 let kelon = picbox.children[0].cloneNode(true);
 picbox.appendChild(kelon); //將圖片添加到最后位置

 //獲取所以圓點
 let pointli = document.getElementsByClassName('point')[0].getElementsByTagName('li');

 //輪播方法
 function carousel(index) {
  let distance = (-index * pic[0].offsetWidth); //計算行走的距離 圖片的index值乘以圖片的大小
  animove(picbox,distance,10); //調(diào)用運動函數(shù)
  for (let i = 0; i < pointli.length; i ++) { //for循環(huán)移除每個小點的選中狀態(tài)
  pointli[i].classList.remove('active');
  }
  if (index != pic.length) { //如果不等于pic的長度 就執(zhí)行
  pointli[index].classList.add('active');
  } else { //如果索引值為3 說明此時圖片為克隆的圖 而圓點的最大索引值為2 將第一個圓點設(shè)置為active即可正常顯示圓點狀態(tài)
  point.children[0].classList.add('active');
  }
 }
 Array.prototype.forEach.call(pointli,function (item,index) { //給每個圓點添加點擊事件
  item.addEventListener('click',function () {
   carouselindex = index;  //將點擊的索引值賦值給輪播索引全局變量
   carousel(carouselindex);
  })
 });
 rightbtn.addEventListener('click',function () { //右邊點擊事件
  carouselindex ++; //每次點擊全局輪播索引增加
  if (carouselindex > pic.length) { //如果索引大于圖片數(shù)量 由于數(shù)量大小獲取的是靜態(tài)的 所以長度不會因為克隆變化而變化
   picbox.style.left = "0px"; //如果大于索引說明此時要離開克隆的那張圖 此時迅速將left值設(shè)置為0
   carouselindex = 1; //然后將索引設(shè)置為1
  }
  carousel(carouselindex); //這時候就在left為0的位置 過渡到索引1的位置 實現(xiàn)無縫輪播的效果
 });
 leftbtn.addEventListener('click',function () { //左邊點擊事件
  carouselindex --; //減減
  if (carouselindex < 0) { //如果索引值小于0
  carouselindex = 2; //將索引值設(shè)置為2
  picbox.style.left = "-3678px"; //將位置迅速變換為第四張圖的位置（克隆的圖）
  }
  carousel(carouselindex); //由克隆的圖過渡到索引為2的圖（第三張圖）
})

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: