JavaScript實現簡易輪播圖最全程式碼解析（ES5）

本文例項為大家分享了實現簡易輪播圖效果的具體程式碼，供大家參考，具體內容如下

全部程式碼：

<!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>
 <http://www.cppcns.com 
;/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 lewww.cppcns.com 
n = imgs.children.length; //圖片張數
 var width = wrapper.offsetWidth; //每張圖片的寬度
 var rate = 15; //一張圖片的切換速度， 單位為px
 var times = 1; //切換速度的倍率
 var timer = null; //初始化一個定時器
 var imgSub = 0; //當前顯示的圖片下標
 var dotSub = 0; //當前顯示圖片的小圓點下標
 var temp;
 // 建立一個文件片段，此時還沒有插入到 DOM 結構中
 const frag = document.createDocumentFragment()
 // 根據圖片數量新增相應的小圓點到文件片段中
 for (let i = 0; i < len; i++) {
  const dot = document.createElement("li");
  dot.className = 'quiet';
  // 先插入文件片段中
  frag.appendChild(dot)www.cppcns.com;
 }
 // 將小圓點片段統一插入到 DOM 結構中
 dots.appendChild(frag)
 // 第一個小圓點高亮顯示
 dots.children[0].className = "active";
 // 滑動函式
 function Roll(distance) { //引數distance：滾動的目標點（必為圖片寬度的倍數）
  clearInterval(imgs.timer); //每次執行該函式必須清除之前的定時器！
  //判斷圖片移動的方向
  var speed = imgs.offsetLeft < distance ? rate : (0 - rate);
  //設定定時器，每隔10毫秒，呼叫一次該匿名函式
  imgs.timer = setInterval(function() {
   //每一次呼叫滾動到的地方 (速度為 speed px/10 ms)         
   imgs.style.left = imgs.offsetLeft + speed + "px";
   //距目標點剩餘的px值      
   var leave = distance - imgs.offsetLeft;
   /*接近目標點時的處理，滾動接近目標時直接到達， 避免rate值設定不當時不能完整顯示圖片*/
   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; //從第二張開始顯示
  }
  // 呼叫滾動函式，引數為該下標的滾動距離
  Roll(-imgSub * width);
  // 如果圓點下標已滾動到最後，則將下標重置為0
  if (dotSub > len - 1) { //判斷是否到了最後一個圓點
   dotSub = 0;
  }
  // 迴圈修改所有圓點預設樣式
  for (var i = 0; i < len; i++) {
   dotss[i].className = "quiet";
  }
  // 給當前滾動到的圓點新增高亮樣式
  dotss[dotSub].className = "active";
 }
 // 建立定時器，開始自動滾動
 timer = setInterval(autoRun,2000);
 // 迴圈新增小圓點的觸發事件
 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; //根據距離改變切換速率
   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';
 }
 // 點選上一張按鈕 觸發事件
 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";
 }
 // 點選下一張按鈕 觸發事件
 btns.children[1].onclick = autoRun;
</script>

圖片：

JavaScript實現簡易輪播圖最全程式碼解析（ES5）

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

JavaScript實現簡易輪播圖最全程式碼解析（ES5）

JavaScript實現簡易輪播圖最全程式碼解析（ES5）

JavaScript實現簡易輪播圖最全程式碼解析（ES6面向物件）

JavaScript實現簡易放大鏡最全程式碼解析（ES5）

前端全棧大佬是如何使用javaScript實現一個輪播圖

React 實現簡易輪播圖

JavaScript實現簡易購物車最全程式碼解析（ES6面向物件）

JavaScript超詳細實現網頁輪播圖

JS實現普通輪播圖特效

js實現左右輪播圖

原生js實現無縫輪播圖

JS實現橫向輪播圖（初級版）

JS實現縱向輪播圖（初級版）

JS實現橫向輪播圖（中級版）

Swift實現3D輪播圖效果

js實現無縫輪播圖效果

js實現無縫輪播圖

js實現無縫輪播圖特效

js實現無縫輪播圖外掛封裝

js實現幻燈片輪播圖

JS+css3實現幻燈片輪播圖

JavaScript實現簡易輪播圖最全程式碼解析（ES5）

相關推薦