JavaScript實現(xiàn)PC端橫向輪播圖

更新時間：2020年02月07日 16:34:52 作者：菜鳥向往藍(lán)天

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

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

步驟：

第一步：先實現(xiàn)右側(cè)按鈕點擊圖片動起來；
1.每次點擊圖片走的距離；
2.起始位置已知，計算定時器每走一小步的距離；

第二步：判斷點擊按鈕一次圖片移動的距離，停止定時器；

第三步：左邊按鈕邏輯和右側(cè)按鈕幾乎一致；
1.因此封裝函數(shù)move(flag),函數(shù)傳參是Boolean則是左右按鈕方向

第四步：無縫輪播：html結(jié)構(gòu)修改，在當(dāng)前結(jié)構(gòu)分別加第一張圖和最后一張圖；
1.判斷圖片位置，設(shè)置相應(yīng)位置；

第五步：小圓點邏輯：排他思想；
1.關(guān)鍵在于小圓點變色，用最終位置計算小圓點下標(biāo)，設(shè)置樣式；

第六步：點擊小圓點，圖片切換和小圓點位置對應(yīng)，move函數(shù)中傳參數(shù)根據(jù)類型判斷，boolean 是左右按鈕，數(shù)值室小圓點下標(biāo)相關(guān)；flag參數(shù)代表左右按鈕和小圓點；

第七步：自動輪播：根據(jù)圖片下標(biāo)進(jìn)行；

第八步：自動輪播和鼠標(biāo)行為同步時：鼠標(biāo)移入清楚自動輪播；鼠標(biāo)移出自動輪播

第九步：鼠標(biāo)移入后，點擊按鈕和小圓點有需要把自動輪播的小標(biāo)值更新，否則沒法同步；

html代碼：

<div id="swiper">
 <ul class="list">
  <li><img src="img/9.jpg" alt=""></li>
  <!-- 最后一張 -->
  <li><img src="img/2.jpg" alt=""></li>
  <li><img src="img/3.jpg" alt=""></li>
  <li><img src="img/4.jpg" alt=""></li>
  <li><img src="img/6.jpg" alt=""></li>
  <li><img src="img/9.jpg" alt=""></li>
  <!-- 第一張 -->
  <li><img src="img/2.jpg" alt=""></li>
 </ul>
 <span class="btn-left">&lt;</span>
 <span class="btn-right">&gt;</span>
 <ul class="points">
  <li class="current"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

css代碼：

<style type="text/css">
 * {
  margin: 0;
  padding: 0;
 }
 
 ul,
 li {
  list-style: none;
 }
 
 a {
  text-decoration: none;
 }
 
 img {
  display: block;
 }
 
 input {
  outline: none;
 }
 
 .clearFix:after {
  content: '';
  display: block;
  clear: both;
 }
 /*禁止系統(tǒng)滾動條*/
 
 html,
 body {
  height: 100%;
  overflow: hidden;
 }
 
 #swiper {
  position: relative;
  width: 1000px;
  height: 500px;
  background: green;
  margin: 50px auto 0;
  overflow: hidden;
 }
 
 #swiper .list {
  position: absolute;
  left: -1000px;
  top: 0;
  width: 7000px;
  overflow: hidden;
 }
 
 #swiper .list>li {
  float: left;
  width: 1000px;
  height: 500px;
 }
 
 #swiper .list>li img {
  width: 100%;
  height: 100%;
 }
 
 #swiper span {
  position: absolute;
  /* left: 0; */
  top: 40%;
  transform: translateY(-50%);
  width: 80px;
  height: 100px;
  background: rgba(0, 0, 0, 0.5);
  font-size: 50px;
  color: white;
  font-weight: bold;
  padding-top: 30px;
  text-align: center;
  opacity: 0;
  transition: opacity 1s;
  cursor: pointer;
 }
 
 #swiper:hover span {
  opacity: 1;
 }
 
 #swiper .btn-left {
  left: 0;
 }
 
 #swiper .btn-right {
  right: 0;
 }
 
 #swiper .points {
  position: absolute;
  left: 40%;
  transform: translateX(-50%);
  bottom: 20px;
  /* width: 300px; */
 }
 
 #swiper .points>li {
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  float: left;
  margin: 0 5px;
 }
 
 #swiper .points .current {
  background: red;
 }
</style>

javascript代碼：

<script>
 window.onload = function() {
  // 獲取變量
  var swiper = document.querySelector('#swiper');
  var list = document.querySelector('#swiper .list');
  var liNodes = document.querySelectorAll('#swiper .list>li');
  var btnNodes = document.querySelectorAll('#swiper span');
  // 切換一張需要的總時長
  var timeAll = 1000;
  // 每走一步需要的時長
  var timeStep = 20;
  var timer = null;
  // 小圓點
  var icons = document.querySelectorAll('#swiper>.points li');
  var isMove = false;
  var autoTimer = null;

  // 鼠標(biāo)進(jìn)入banner
  swiper.onmouseenter = function() {
  // 清除定時器
  clearInterval(autoTimer);
  }

  // 鼠標(biāo)離開banner
  swiper.onmouseleave = function() {
  // 打開自動輪播定時器
  autoRun();
  }

  // 點擊按鈕切換圖片
  // 右按鈕
  btnNodes[1].onclick = function() {
  // 圖片且切換函數(shù)
  move(true);
  }

  // 左按鈕
  btnNodes[0].onclick = function() {
  // 圖片切換函數(shù)
  move(false);
  }

  // 圖片切換函數(shù)
  function move(flag) {
  // 保證定時器只開一個，不會堆砌
  if (isMove) {
   return;
  }
  isMove = true;


  // 區(qū)分flag參數(shù)，boolean是左右圖片切換
  if (typeof flag == 'boolean') {
   if (flag) {
   var elementDistance = -1000;
   } else {
   var elementDistance = 1000;
   }
  } else {
   var elementDistance = flag - list.offsetLeft;
  }

  // 每次點擊后，ul所走的距離
  var elementLast = list.offsetLeft + elementDistance;
  // 每走一小步的距離
  var step = elementDistance / (timeAll / timeStep);

  timer = setInterval(function() {
   var left = list.offsetLeft + step;
   if (left == elementLast) {
   // 走的的距離等于最終的位置
   clearInterval(timer);
   if (left == -6000) {
    left = -1000;
   } else if (left == 0) {
    left = -5000;
   }
   isMove = false;
   }
   // 設(shè)置樣式
   list.style.left = left + 'px';
  }, timeStep);

  // 小圓點切換邏輯
  for (var i = 0; i < icons.length; i++) {
   icons[i].className = '';
  }

  // 小圓點切換
  var index = elementLast / -1000 - 1;
  if (index > 4) {
   index = 0;
  } else if (index < 0) {
   index = 4;
  }
  icons[index].className = 'current';
  console.log(icons);
  //讓自動輪播和點擊后下標(biāo)保持統(tǒng)一
  autoIndex = index + 1;
  }

  // 點擊小圓點邏輯
  for (var i = 0; i < icons.length; i++) {
  icons[i].index = i;
  icons[i].onclick = function() {
   // 拿小圓點下標(biāo)，求顯示圖片的下標(biāo)，再求顯示圖片位置
   move((this.index + 1) * -1000);
  }
  }

  // 自動輪播邏輯
  var autoIndex = 1;
  autoRun();

  function autoRun() {
  autoTimer = setInterval(function() {
   autoIndex++;
   move(autoIndex * -1000);
   if (autoIndex == 6) {
   autoIndex = 1;
   }
  }, 2000);
  }
 }
</script>

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

您可能感興趣的文章: