如何使用JavaScript實現「無縫滾動自動播放」輪播圖效果

時間 2020-08-20

標籤如何使用 javascript 實現無縫滾動自動播放效果欄目 JavaScript 简体版

原文原文鏈接

在一些項目開發中，咱們常常須要使用到輪播圖，可是沒有深刻學習的狀況下作輪播圖是很是困難的。
javascript

思路

分紅小問題來解決css

1. 動態生成序號12345

頁面有多少li（圖片），就有多少序號html

2. 點擊序號、顯示高亮、切換圖片

2.1 給序號註冊onclick事件
2.2 取消其餘序號高亮顯示，讓當前點擊的序號高亮顯示
2.3 點擊序號，動畫的方式切換到當前點擊的圖片位置（設置自定義屬性，記錄當前索引，有了索引就可用動畫進行移動）
java

3. 鼠標放到盒子上的時候顯示左右箭頭，移開時候隱藏

onmouseenter和onmouseleave
node

4. 實現左右箭頭播放上一張下一張（無縫滾動）

5. 隔多少時間自動播放

setInterval和element.click()聯合便可實現瀏覽器

代碼：

index.html:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                list-style: none;
                border: 0;
            }

            body {
                margin: 0;
                background-color: rgb(55, 190, 89);
            }

            .all {
                width: 500px;
                height: 200px;
                padding: 4px;
                margin: 100px auto;
                position: relative;
                background-color: #fff;
                border-radius: 20px;
            }

            .screen {
                width: 500px;
                height: 200px;
                border-radius: 17px;
                overflow: hidden;
                position: relative;
            }

            .screen li {
                width: 500px;
                height: 200px;
                overflow: hidden;
                float: left;
            }

            .screen ul {
                position: absolute;
                left: 0;
                top: 0px;
                width: 3000px;
            }

            .all ol {
                position: absolute;
                right: 180px;
                bottom: 10px;
                line-height: 20px;
                text-align: center;
            }
            
            .all ol li {
                float: left;
                width: 20px;
                height: 20px;
                background: #fff;
                border-radius: 10px;
                border: 1px solid #ccc;
                margin-left: 10px;
                cursor: pointer;
                opacity: 0.5;
                /* 透明度 */
            }

            .all ol li.current {
                opacity: 1.0;
            }

            #arr {
                display: none;
                z-index: 1000;

            }

            #arr span {
                width: 40px;
                height: 40px;
                position: absolute;
                left: 5px;
                top: 50%;
                margin-top: -20px;
                background: #000;
                cursor: pointer;
                line-height: 40px;
                text-align: center;
                font-weight: bold;
                font-family: '黑體';
                font-size: 30px;
                color: #fff;
                opacity: 0.5;
                border: 1px solid #fff;
                border-radius: 5px;
            }

            #arr #right {
                right: 5px;
                left: auto;
            }
        </style>
    </head>

    <body>
        <div class="all" id='box'>
            <div class="screen">
                <ul>
                    <li><img src="images/wf1.jpg" width="500" height="200" /></li>
                    <li><img src="images/wf2.jpg" width="500" height="200" /></li>
                    <li><img src="images/wf3.jpg" width="500" height="200" /></li>
                    <li><img src="images/wf4.jpg" width="500" height="200" /></li>
                    <li><img src="images/wf5.jpg" width="500" height="200" /></li>
                </ul>
                <ol>
                </ol>
            </div>
            <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
        </div>
        <script src="common.js"></script>
        <script src="animate.js"></script>
        <script src="index.js"></script>
    </body>

</html>

index.js

//獲取元素
var box = my$('box');
var screen = box.children[0];
var ul = screen.children[0];
var ol = screen.children[1]
//獲取箭頭
var arr = my$('arr');
var arrLeft = my$('left');
var arrRight = my$('right');
var count = ul.children.length; /* 獲取圖片數量  尚未放cloneLi，因此數值是5*/
var imgWidth = screen.offsetWidth; /* 獲取的圖片（盒子）的寬高 */
//1.動態生成序號
for (i = 0; i < count; i++) {
    // 在ol內建立li
    var li = document.createElement('li');
    ol.appendChild(li);
    // li內賦予數值
    setInnerText(li, i + 1);
    li.onclick = liClick;
    // 設置標籤的自定義屬性（建立索引）
    li.setAttribute('index', i);
}

// 2.點擊序號，切換，顯示高亮
function liClick() {
    // 取消其餘的li的高亮，顯示當前li高亮
    for (i = 0; i < ol.children.length; i++) {
        var li = ol.children[i];
        li.className = '';
        this.className = 'current';
    }

    // 獲取的自定義屬性是字符串類型，要轉成整數
    var liIndex = parseInt(this.getAttribute('index'));
    animate(ul, -liIndex * imgWidth);
    //使得後面定義的全局變量index等於li的屬性liIndex
    index = liIndex;
}

//ol內的第一個li顯示高亮色
ol.children[0].className = 'current';

//3.鼠標放上去的時候顯示箭頭
// onmouseover和onmouseout會觸發事件冒泡；onmouseleave和onmouseenter不會觸發事件冒泡
box.onmouseenter = function () {
    arr.style.display = 'block';
    clearInterval(timeId);
}

box.onmouseleave = function () {
    arr.style.display = 'none';
    timeId = setInterval(function () {
        arrRight.click();
    }, 2500)
}

// 4.實現上一張，下一張的功能   
var index = 0; //第一張圖片的索引

arrRight.onclick = function () {
    //  判斷是不是克隆的第一張圖片，若是是克隆的第一張圖片，此時修改ul的座標，顯示真正的第一張圖片
    if (index === count) {
        ul.style.left = '0px';
        index = 0;
    }


    // 若是是最後一張圖片，不讓index++
    index++;
    // 有5張圖片，可是還有一張克隆的圖片，克隆圖片索引是5
    if (index < count) {
        //獲取圖片對應的序號，讓序號進行點擊
        ol.children[index].click();
    } else {
        animate(ul, -index * imgWidth);
        // 取消全部的高亮現實，讓第一個序號高亮顯示
        for (var i = 0; i < ol.children.length; i++) {
            var li = ol.children[i];
            li.className = '';
        }
        ol.children[0].className = 'current';
    }

    // 
}

arrLeft.onclick = function () {
    if (index === 0) {
        index = count;
        ul.style.left = -index * imgWidth + 'px';
    }
    index--;
    ol.children[index].click();
}

// 無縫滾動
var firstLi = ul.children[0];
// 克隆li    
//cloneNode() 複製節點：參數 true 複製節點中的內容 ;false 只複製當前節點，不復制裏面的內容
var cloneLi = firstLi.cloneNode(true);
ul.appendChild(cloneLi)


// 5.自動播放
var timeId = setInterval(function () {
    //  切換到下一張圖片
    arrRight.click();
}, 2500)

common.js

function my$(id) {
    return document.getElementById(id);
  }
  
  // 處理瀏覽器兼容性
  // 獲取第一個子元素
  function getFirstElementChild(element) {
      var node, nodes = element.childNodes, i = 0;
      while (node = nodes[i++]) {
          if (node.nodeType === 1) {
              return node;
          }
      }
      return null;
  }
  
  // 處理瀏覽器兼容性
  // 獲取下一個兄弟元素
   function getNextElementSibling(element) {
      var el = element;
      while (el = el.nextSibling) {
        if (el.nodeType === 1) {
            return el;
        }
      }
      return null;
    }
  
  
  // 處理innerText和textContent的兼容性問題
  // 設置標籤之間的內容
  function setInnerText(element, content) {
    // 判斷當前瀏覽器是否支持 innerText
    if (typeof element.innerText === 'string') {
      element.innerText = content;
    } else {
      element.textContent = content;
    }
  }
  
  // 處理註冊事件的兼容性問題
  // eventName, 不帶on，  click  mouseover  mouseout
  function addEventListener(element, eventName, fn) {
    // 判斷當前瀏覽器是否支持addEventListener 方法
    if (element.addEventListener) {
      element.addEventListener(eventName, fn);  // 第三個參數 默認是false
    } else if (element.attachEvent) {
      element.attachEvent('on' + eventName, fn);
    } else {
      // 至關於 element.onclick = fn;
      element['on' + eventName] = fn;
    }
  }
  
  // 處理移除事件的兼容性處理
  function removeEventListener(element, eventName, fn) {
    if (element.removeEventListener) {
      element.removeEventListener(eventName, fn);
    } else if (element.detachEvent) {
      element.detachEvent('on' + eventName, fn);
    } else {
      element['on' + eventName] = null;
    }
  }
  
  // 獲取頁面滾動距離的瀏覽器兼容性問題
  // 獲取頁面滾動出去的距離
  function getScroll() {
    var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    return {
      scrollLeft: scrollLeft,
      scrollTop: scrollTop
    }
  }
  
  // 獲取鼠標在頁面的位置，處理瀏覽器兼容性
  function getPage(e) {
    var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
    var pageY = e.pageY || e.clientY + getScroll().scrollTop;
    return {
      pageX: pageX,
      pageY: pageY
    }
  }
  
  
  //格式化日期對象，返回yyyy-MM-dd HH:mm:ss的形式
  function formatDate(date) {
    // 判斷參數date是不是日期對象
    // instanceof  instance 實例(對象)   of 的
    // console.log(date instanceof Date);
    if (!(date instanceof Date)) {
      console.error('date不是日期對象')
      return;
    }
  
    var year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate(),
        hour = date.getHours(),
        minute = date.getMinutes(),
        second = date.getSeconds();
  
    month = month < 10 ? '0' + month : month;
    day = day < 10 ? '0' + day : day;
    hour = hour < 10 ? '0' + hour : hour;
    minute = minute < 10 ? '0' + minute : minute;
    second = second < 10 ? '0' + second : second;
  
    return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
  }
  
  // 獲取兩個日期的時間差
  function getInterval(start, end) {
    // 兩個日期對象，相差的毫秒數
    var interval = end - start;
    // 求 相差的天數/小時數/分鐘數/秒數
    var day, hour, minute, second;
  
    // 兩個日期對象，相差的秒數
    // interval = interval / 1000;
    interval /= 1000;
  
    day = Math.round(interval / 60 / 60 / 24);
    hour = Math.round(interval / 60 / 60 % 24);
    minute = Math.round(interval / 60 % 60);
    second = Math.round(interval % 60);
  
    return {
      day: day,
      hour: hour,
      minute: minute,
      second: second
    }
  }

animate.js

// var timerId = null;
// 封裝動畫的函數
function animate(element, target) {
    // 經過判斷，保證頁面上只有一個定時器在執行動畫
   if (element.timerId) {
     clearInterval(element.timerId);
     element.timerId = null;
   }
 
   element.timerId = setInterval(function () {
     // 步進  每次移動的距離
     var step = 10;
     // 盒子當前的位置
     var current = element.offsetLeft;
     // 當從400 到 800  執行動畫
     // 當從800 到 400  不執行動畫
 
     // 判斷若是當前位置 > 目標位置 此時的step  要小於0
     if (current > target) {
       step = - Math.abs(step);
     }
 
     // Math.abs(current - target)   <= Math.abs(step)
     if (Math.abs(current - target)   <= Math.abs(step)) {
       // 讓定時器中止
       clearInterval(element.timerId);
       // 讓盒子到target的位置
       element.style.left = target + 'px';
       return;
     }
     // 移動盒子
     current += step;
     element.style.left = current + 'px';
   }, 5);
 }