如何使用JavaScript實現(xiàn)無縫滾動自動播放輪播圖效果

更新時間：2020年08月20日 08:35:15 作者：FredLiu

這篇文章主要介紹了如何使用JavaScript實現(xiàn)“無縫滾動自動播放”輪播圖效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

在一些項目開發(fā)中，我們經(jīng)常需要使用到輪播圖，但是沒有深入學習的情況下做輪播圖是非常困難的。

思路

分成小問題來解決

1. 動態(tài)生成序號12345

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

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

2.1 給序號注冊onclick事件

2.2 取消其他序號高亮顯示，讓當前點擊的序號高亮顯示

2.3 點擊序號，動畫的方式切換到當前點擊的圖片位置（設置自定義屬性，記錄當前索引，有了索引就可用動畫進行移動）

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

onmouseenter和onmouseleave

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

5. 隔多少時間自動播放

setInterval 和 element1..click() 聯(lián)合即可實現(xiàn)

代碼： 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"><</span><span id="right">></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; /* 獲取圖片數(shù)量 還沒有放cloneLi，所以數(shù)值是5*/
var imgWidth = screen.offsetWidth; /* 獲取的圖片（盒子）的寬高 */
//1.動態(tài)生成序號
for (i = 0; i < count; i++) {
  // 在ol內創(chuàng)建li
  var li = document.createElement('li');
  ol.appendChild(li);
  // li內賦予數(shù)值
  setInnerText(li, i + 1);
  li.onclick = liClick;
  // 設置標簽的自定義屬性（創(chuàng)建索引）
  li.setAttribute('index', i);
}

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

  // 獲取的自定義屬性是字符串類型，要轉成整數(shù)
  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會觸發(fā)事件冒泡；onmouseleave和onmouseenter不會觸發(fā)事件冒泡
box.onmouseenter = function () {
  arr.style.display = 'block';
  clearInterval(timeId);
}

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

// 4.實現(xiàn)上一張，下一張的功能  
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);
    // 取消所有的高亮現(xiàn)實，讓第一個序號高亮顯示
    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() 復制節(jié)點：參數(shù) true 復制節(jié)點中的內容 ;false 只復制當前節(jié)點，不復制里面的內容
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); // 第三個參數(shù) 默認是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) {
  // 判斷參數(shù)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) {
  // 兩個日期對象，相差的毫秒數(shù)
  var interval = end - start;
  // 求 相差的天數(shù)/小時數(shù)/分鐘數(shù)/秒數(shù)
  var day, hour, minute, second;
 
  // 兩個日期對象，相差的秒數(shù)
  // 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
  }
 }

animage.js

// var timerId = null;
// 封裝動畫的函數(shù)
function animate(element, target) {
  // 通過判斷，保證頁面上只有一個定時器在執(zhí)行動畫
  if (element.timerId) {
   clearInterval(element.timerId);
   element.timerId = null;
  }
 
  element.timerId = setInterval(function () {
   // 步進 每次移動的距離
   var step = 10;
   // 盒子當前的位置
   var current = element.offsetLeft;
   // 當從400 到 800 執(zhí)行動畫
   // 當從800 到 400 不執(zhí)行動畫
 
   // 判斷如果當前位置 > 目標位置 此時的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);
 }

總結

到此這篇關于如何使用JavaScript實現(xiàn)無縫滾動自動播放輪播圖效果的文章就介紹到這了,更多相關js無縫滾動自動播放內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: