快捷導(dǎo)航

JavaScript實現(xiàn)簡易輪播圖最全代碼解析(ES5)

更新時間：2021年09月10日 10:36:00 作者：颯爾

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

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

全部代碼：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>ES5輪播圖</title>
  <style>
   * {padding: 0;margin: 0;}
   #wrapper {
    position: relative;
    margin: 50px auto;
    padding: 0;
    width: 1000px;
    height: 300px;
   }
   #wrapper .content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
   }
   #wrapper>.content>.imgs {
    position: absolute;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    width: 6000px;
    /*多留出一張圖片的寬度！*/
    list-style: none;
   }
   #wrapper>.content>.imgs li {
    float: left;
    margin: 0;
    padding: 0;
    width: 1000px;
    height: 300px;
   }
   #wrapper>.content>.imgs>li img {
    width: 100%;
    height: 100%;
   }
   #wrapper>.content>.dots {
    width: 163px;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    bottom: 10px;
    list-style: none;
   }
   #wrapper>.content>.dots li {
    float: left;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    margin-left: 10px;
    cursor: pointer;
   }
   li.active {
    background-color: white;
   }
   li.quiet {
    background-color: #5a5a58;
   }
   .btns {
    display: none;
   }
   .btns span {
    position: absolute;
    width: 25px;
    height: 40px;
    top: 50%;
    margin-top: -20px;
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    font-family: Simsun;
    font-size: 30px;
    border: 1px solid #fff;
    opacity: 0.5;
    cursor: pointer;
    color: #fff;
    background: black;
   }
   .btns .left {
    left: 5px;
   }
   .btns .right {
    left: 100%;
    margin-left: -32px;
   }
  </style>
 </head>
 <body>
  <div id="wrapper">
   <div class="content">
    <ul class="imgs">
     <li><img src="img/s1.jpg" /></li>
     <li><img src="img/s2.jpg" /></li>
     <li><img src="img/s3.jpg" /></li>
     <li><img src="img/s4.jpg" /></li>
     <li><img src="img/s5.jpg" /></li>
    </ul>
    <ul class='dots'></ul>
   </div>
   <div class="btns">
    <span class="left">&lt;</span>
    <span class="right">&gt;</span>
   </div>
  </div>
 </body>
</html>
<script>
 var wrapper = document.getElementById("wrapper");
 var imgs = document.getElementsByClassName("imgs")[0];
 var dots = document.getElementsByClassName("dots")[0];
 var btns = document.getElementsByClassName("btns")[0];
 var dotss = dots.children;
 var len = imgs.children.length; //圖片張數(shù)
 var width = wrapper.offsetWidth; //每張圖片的寬度
 var rate = 15; //一張圖片的切換速度， 單位為px
 var times = 1; //切換速度的倍率
 var timer = null; //初始化一個定時器
 var imgSub = 0; //當前顯示的圖片下標
 var dotSub = 0; //當前顯示圖片的小圓點下標
 var temp;
 // 創(chuàng)建一個文檔片段，此時還沒有插入到 DOM 結(jié)構(gòu)中
 const frag = document.createDocumentFragment()
 // 根據(jù)圖片數(shù)量添加相應(yīng)的小圓點到文檔片段中
 for (let i = 0; i < len; i++) {
  const dot = document.createElement("li");
  dot.className = 'quiet';
  // 先插入文檔片段中
  frag.appendChild(dot);
 }
 // 將小圓點片段統(tǒng)一插入到 DOM 結(jié)構(gòu)中
 dots.appendChild(frag)
 // 第一個小圓點高亮顯示
 dots.children[0].className = "active";
 // 滑動函數(shù)
 function Roll(distance) { //參數(shù)distance：滾動的目標點（必為圖片寬度的倍數(shù)）
  clearInterval(imgs.timer); //每次運行該函數(shù)必須清除之前的定時器！
  //判斷圖片移動的方向
  var speed = imgs.offsetLeft < distance ? rate : (0 - rate);
  //設(shè)置定時器，每隔10毫秒，調(diào)用一次該匿名函數(shù)
  imgs.timer = setInterval(function() {
   //每一次調(diào)用滾動到的地方 (速度為 speed px/10 ms)         
   imgs.style.left = imgs.offsetLeft + speed + "px";
   //距目標點剩余的px值      
   var leave = distance - imgs.offsetLeft;
   /*接近目標點時的處理，滾動接近目標時直接到達， 避免rate值設(shè)置不當時不能完整顯示圖片*/
   if (Math.abs(leave) <= Math.abs(speed)) {
    clearInterval(imgs.timer);
    imgs.style.left = distance + "px";
   }
  }, 10);
 }
 /*克隆第一個li到列表末*/
 imgs.appendChild(imgs.children[0].cloneNode(true));
 function autoRun() {
  imgSub++;
  dotSub++;
  if (imgSub > len) { //滾動完克隆項后
   imgs.style.left = 0; //改變left至真正的第一項處
   imgSub = 1; //從第二張開始顯示
  }
  // 調(diào)用滾動函數(shù)，參數(shù)為該下標的滾動距離
  Roll(-imgSub * width);
  // 如果圓點下標已滾動到最后，則將下標重置為0
  if (dotSub > len - 1) { //判斷是否到了最后一個圓點
   dotSub = 0;
  }
  // 循環(huán)修改所有圓點默認樣式
  for (var i = 0; i < len; i++) {
   dotss[i].className = "quiet";
  }
  // 給當前滾動到的圓點添加高亮樣式
  dotss[dotSub].className = "active";
 }
 // 創(chuàng)建定時器，開始自動滾動
 timer = setInterval(autoRun,2000);
 // 循環(huán)添加小圓點的觸發(fā)事件
 for (var i = 0; i < len; i++) {
  dotss[i].index = i;
  dotss[i].onmouseover = function() {
   for (var j = 0; j < len; j++) {
    dotss[j].className = "quiet";
   }
   this.className = "active";
   temp = dotSub;
   imgSub = dotSub = this.index;
   times = Math.abs(this.index - temp); //距離上個小圓點的距離
   rate = rate * times; //根據(jù)距離改變切換速率
   Roll(-this.index * width);
   rate = 15;
  }
 }
 // 添加事件：鼠標移動到wrapper上，左右切換按鈕顯示
 wrapper.onmouseover = function() {
  clearInterval(timer);
  btns.style.display = 'block';
 }
 // 添加事件：鼠標移出wrapper，左右切換按鈕隱藏
 wrapper.onmouseout = function() {
  timer = setInterval(autoRun,2000);
  btns.style.display = 'none';
 }
 // 點擊上一張按鈕 觸發(fā)事件
 btns.children[0].onclick = function() {
  imgSub--;
  dotSub--;
  if (imgSub < 0) { //滾動完第一項后
   imgs.style.left = -len * width + "px"; //改變left至克隆的第一項處
   imgSub = dotSub = len - 1;
  }
  Roll(-imgSub * width);
  if (dotSub < 0) {
   dotSub = len - 1;
  }
  for (var i = 0; i < len; i++) {
   dotss[i].className = "quiet";
  }
  dotss[dotSub].className = "active";
 }
 // 點擊下一張按鈕 觸發(fā)事件
 btns.children[1].onclick = autoRun;
</script>

圖片：