js進(jìn)階，輪播圖實(shí)現(xiàn)原理（附可運(yùn)行源碼）

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

代碼效果:

附代碼及其講解：

圖1

上圖為文件的目錄結(jié)構(gòu)。建立img文件夾，并新建demo.html文件。

圖2

圖3

圖4

圖5

從第6行到77行結(jié)束為頁(yè)面的css代碼。此處css 主要是標(biāo)簽選擇器，類選擇器，及其屬性與值，看不懂的，需學(xué)習(xí)css基礎(chǔ)教程。

圖6

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

圖7

此圖中106行是重復(fù)執(zhí)行的定時(shí)器

圖8

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

圖9

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

東西，都值得被分享！這次給小伙伴們分享一個(gè)超強(qiáng)的css3屬性 CSS Scroll Snap 實(shí)現(xiàn)輪播圖功能。

vue-snap 基于 CSS Scroll Snap 實(shí)現(xiàn)輕量級(jí)輪播圖組件。支持單個(gè)/多個(gè)滾動(dòng)，不規(guī)則大小滾動(dòng)及懶加載滾動(dòng)，適配移動(dòng)端。

特性

輕量級(jí)（比其他libs輕5-10倍）
沒有計(jì)算或復(fù)雜的邏輯（性能）
大部分功能僅需css就可實(shí)現(xiàn)
自由設(shè)置需要顯示的輪播圖數(shù)量
完全自適應(yīng)

CSS Scroll Snapping 簡(jiǎn)單用法

為了更方便學(xué)習(xí)和了解更多用法，為大家搜集了如下兩個(gè)網(wǎng)址。

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
  }
}

提供各種演示實(shí)例及API說明

附上文檔演示及倉(cāng)庫(kù)地址

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

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

# 倉(cāng)庫(kù)地址
https://github.com/bartdominiak/vue-snap

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript 移動(dòng)端輪播——原生</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">
    //求可視區(qū)的寬度
    var w = document.documentElement.clientWidth || document.body.clientWidth;
    //獲取ul
    var ul = document.getElementsByTagName("ul")[0];
    //獲取下面的點(diǎn)點(diǎn)點(diǎn)
    var lis = document.querySelectorAll("ol>li");
    //聲明兩個(gè)變量存儲(chǔ)手指按下時(shí)到可視區(qū)的距離和ul的left值
    var startX,offsetLeft;
    //手指按下
    ul.addEventListener("touchstart",function(e){
    //把上一次手指抬起時(shí)加的過渡效果取消
    ul.style.transition = "none";

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

    var ev = e || window.event;
    //求得手指到可視區(qū)的距離
    startX = ev.touches[0].clientX;
    //把ul的left值計(jì)算一下
    offsetLeft = ul.offsetLeft;
    //因?yàn)闉g覽器有一些默認(rèn)行為(比如手指觸摸會(huì)使網(wǎng)頁(yè)前進(jìn)后退)
    ev.preventDefault();
    },false)
    //手指移動(dòng)
    ul.addEventListener("touchmove",function(e){
        var ev = e || window.event;
        //求得移動(dòng)式手指到可視區(qū)的距離
        var moveX = ev.touches[0].clientX;
        //真實(shí)的ul的left值
        var left = moveX - startX + offsetLeft;
        ul.style.left = left + "px";
        //因?yàn)闉g覽器有一些默認(rèn)行為
        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 = "";
        }
        //因?yàn)榇颂幨莾商讏D%5
        lis[Math.abs(num)%5].className = "active";

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

片規(guī)格: 665px * 444px

在線咨詢

上一篇：css隱藏內(nèi)容樣式方法（自適應(yīng)頁(yè)面常用）
下一篇：網(wǎng)頁(yè)WEB集成IP視頻監(jiān)控不是夢(mèng)，0基礎(chǔ)不懂編程？你也可以做到

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

js進(jìn)階，輪播圖實(shí)現(xiàn)原理（附可運(yùn)行源碼）

您的項(xiàng)目需求