js進階，輪播圖實現原理（附可運行源碼）

在網頁的廣告中，常常存在使用js代碼實現圖片輪播功能，在電商類網站中常遇到的開發任務，輪播廣告效果通常的應用場景：企業宣傳、產品促銷、大事記展示等等。下面用精簡的100多行的代碼實現了5圖輪播廣告效果，當然，下面代碼使用一種原生js的寫法(還會有jquery的寫法，vue的寫法等)。作為js的進階，原生寫法可以鍛煉js的編程水平，及html,css，js 的混合編程能力。當然也可將下列代碼用在公司的現實開發場景中，減少編碼時間。

代碼效果:

附代碼及其講解：

圖1

上圖為文件的目錄結構。建立img文件夾，并新建demo.html文件。

圖2

圖3

圖4

圖5

從第6行到77行結束為頁面的css代碼。此處css 主要是標簽選擇器，類選擇器，及其屬性與值，看不懂的，需學習css基礎教程。

圖6

上圖中，79行的window.onload該方法用于在網頁加載完畢后立刻執行的操作,即當html加載完畢后,立刻執行functiona()方法，80行到84行中的documnet.getElementById()是獲取頁面需要操作的元素(這句看不懂的需要，重新學習javascript基礎教程)。80行是為取得輪播圖父容器，81行是為取得圖片列表。82行是獲取圖片切換圓點按鈕組。83，84行為向左和向右側切換箭頭。此段js 涉及主要知識點是DOM事件和定時器的用法。88行獲取的是style.left，是相對左邊獲取距離，所以第一張圖后style.left都為負值，且style.left獲取的是字符串，需要用parseInt()取整轉化為數字。90行是無限滾動判斷。

圖7

此圖中106行是重復執行的定時器

圖8

此圖中131行這里獲得鼠標移動到小圓點的位置，用this把index綁定到對象buttons[i]上，去搜索js中this的用法。由于這里的index是自定義屬性，需要用到getAttribute()這個DOM2級方法，去獲取自定義index的屬性，133行這個index是當前圖片停留時的index。

圖9

圖9中145行166行為html代碼。147行定義了一個容器holder，為了包含要展示的圖片與按鈕相關元素。以上代碼輪播圖主要原理是通過改變圖片的偏移量來實現圖片的切換。

東西，都值得被分享！這次給小伙伴們分享一個超強的css3屬性 CSS Scroll Snap 實現輪播圖功能。

vue-snap 基于 CSS Scroll Snap 實現輕量級輪播圖組件。支持單個/多個滾動，不規則大小滾動及懶加載滾動，適配移動端。

特性

輕量級（比其他libs輕5-10倍）
沒有計算或復雜的邏輯（性能）
大部分功能僅需css就可實現
自由設置需要顯示的輪播圖數量
完全自適應

CSS Scroll Snapping 簡單用法

為了更方便學習和了解更多用法，為大家搜集了如下兩個網址。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap
https://css-tricks.com/practical-css-scroll-snapping/

安裝

$ npm i vue-snap -S

全局引入

import Vue from 'vue'
import VueSnap from 'vue-snap'
import 'vue-snap/dist/vue-snap.css'

Vue.use(VueSnap)

局部引入

import { Carousel, Slide } from 'vue-snap'
import 'vue-snap/dist/vue-snap.css'

export default {
  components: {
    Carousel,
    Slide
  }
}

提供各種演示實例及API說明

附上文檔演示及倉庫地址

# 文檔地址
https://bartdominiak.github.io/vue-snap/

# 示例地址
https://vue-snap.vercel.app/

# 倉庫地址
https://github.com/bartdominiak/vue-snap

ok，今天就分享到這里。感興趣的同學可以去嘗鮮下哈，歡迎一起留言討論。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript 移動端輪播——原生</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
*{
    margin: 0;
    padding: 0px;
    list-style: none;
}
div{
    width: 100%;
    height: 66vw;
    overflow: hidden;
    position: relative;
}
div>ul{
    width: 1000%;
    height: 66vw;
    position: absolute;
    left: 0;
    top: 0;
}
div>ul>li{
    width: 10%;
    height: 66vw;
    float: left;
}
div>ul>li>img{
    width: 100%;
}
div>ol{
    position: absolute;
    left: 50%;
    bottom: 2vw;
    transform: translateX(-50%);
}
div>ol>li{
    width: 3vw;
    height: 3vw;
    float: left;
    margin: 1vw;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.5);
}
div>ol>li.active{
    background-color: orange;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="img/1.jpeg" alt="" /></li>
<li><img src="img/2.jpeg" alt="" /></li>
<li><img src="img/3.jpeg" alt="" /></li>
<li><img src="img/4.jpeg" alt="" /></li>
<li><img src="img/5.jpeg" alt="" /></li>
<li><img src="img/1.jpeg" alt="" /></li>
<li><img src="img/2.jpeg" alt="" /></li>
<li><img src="img/3.jpeg" alt="" /></li>
<li><img src="img/4.jpeg" alt="" /></li>
<li><img src="img/5.jpeg" alt="" /></li>
</ul>
<ol>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<script type="text/javascript">
    //求可視區的寬度
    var w = document.documentElement.clientWidth || document.body.clientWidth;
    //獲取ul
    var ul = document.getElementsByTagName("ul")[0];
    //獲取下面的點點點
    var lis = document.querySelectorAll("ol>li");
    //聲明兩個變量存儲手指按下時到可視區的距離和ul的left值
    var startX,offsetLeft;
    //手指按下
    ul.addEventListener("touchstart",function(e){
    //把上一次手指抬起時加的過渡效果取消
    ul.style.transition = "none";

    console.log("啊啊啊啊啊")
    //手指按下時我做一個判斷看看你當前在第幾張圖
    if(ul.offsetLeft===0){//第一套的第一張圖
        ul.style.left = -5*w+"px";//第二套的第一張去
    }else if(ul.offsetLeft === -9*w){//第二套的第五張圖
        ul.style.left = -4*w + "px";//調到第一套的第5張去
    }

    var ev = e || window.event;
    //求得手指到可視區的距離
    startX = ev.touches[0].clientX;
    //把ul的left值計算一下
    offsetLeft = ul.offsetLeft;
    //因為瀏覽器有一些默認行為(比如手指觸摸會使網頁前進后退)
    ev.preventDefault();
    },false)
    //手指移動
    ul.addEventListener("touchmove",function(e){
        var ev = e || window.event;
        //求得移動式手指到可視區的距離
        var moveX = ev.touches[0].clientX;
        //真實的ul的left值
        var left = moveX - startX + offsetLeft;
        ul.style.left = left + "px";
        //因為瀏覽器有一些默認行為
        ev.preventDefault();
        },false)
        //手指抬起
        ul.addEventListener("touchend",function(){
        var num = Math.round(ul.offsetLeft/w);
        for(var i=0;i<lis.length;i++){
        		lis[i].className = "";
        }
        //因為此處是兩套圖%5
        lis[Math.abs(num)%5].className = "active";

        //當手指抬起時我讓他自動滑到第一張 注意加一個過渡
        ul.style.transition = "0.5s";
        ul.style.left = num * w + "px";
    },false)
</script>
</body>
</html>

片規格: 665px * 444px

在線咨詢

上一篇：css隱藏內容樣式方法（自適應頁面常用）
下一篇：網頁WEB集成IP視頻監控不是夢，0基礎不懂編程？你也可以做到

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

js進階，輪播圖實現原理（附可運行源碼）

您的項目需求