JavaScript學(xué)習(xí)筆記：掌握了獲取元素和事件綁定，可以做輪播圖片

、什么是JavaScript中的window？

JavaScript中window是一個全局對象，代表瀏覽器中一個打開的窗口，每個窗口都是一個window對象。

2、什么是document？

document是window的一個屬性，這個屬性是一個對象；

document代表當前窗口中的整個網(wǎng)頁；

document對象保存了網(wǎng)頁上所有的內(nèi)容，通過document對象就可以操作網(wǎng)頁上的內(nèi)容。

3、什么是JavaScript中的DOM？

DOM定義了訪問和操作HTML文檔(網(wǎng)頁)的標準方法；

DOM全稱：Document Object Model，即文檔模型對象；

學(xué)習(xí)DOM就是學(xué)習(xí)如何通過document對象操作網(wǎng)頁上的內(nèi)容。

4、JavaScript中如何通過選擇器獲取DOM元素？

querySelector：只會返回根據(jù)指定選擇器找到的第一個元素，例子：

let oDiv = document.querySelector("div");

console.log("oDiv"); //輸出：<div></div>

querySelectorAll：會返回指定選擇器找到的所有元素，例如：

let oDivs = document.querySelectorAll("div");

console.log("oDivs"); //輸出：NodeList由所有div元素組成的為數(shù)組。

5、JavaScript如何獲取和設(shè)置元素內(nèi)容？

獲取元素內(nèi)容：

1）innerHTML獲取的內(nèi)容包含標簽，innerText/textContent獲取的內(nèi)容不包含標簽；

2）innerHTML/textContent獲取的內(nèi)容不會去除兩端的空格，innerText獲取的內(nèi)容會去除兩端的空格。

設(shè)置元素內(nèi)容：

共同點：無論通過innerHTML/innerText/textContent設(shè)置內(nèi)容，新的內(nèi)容都會覆蓋原有的內(nèi)容；

區(qū)別：1）通過innerHTML設(shè)置數(shù)據(jù)，數(shù)據(jù)中包含標簽，會轉(zhuǎn)換成標簽之后再添加；

2）通過innerText/textContent設(shè)置數(shù)據(jù)，數(shù)據(jù)中包含標簽，不會轉(zhuǎn)換成標簽，會當做一個字符串直接設(shè)置。

6、什么是JavaScript中的事件？如何給元素綁定事件？

用戶和瀏覽器之間的交互行為被稱為事件，比如：鼠標的點擊/移入/移出。

在JavaScript中所有的HTML標簽都可以添加事件；

元素.事件名稱 = function(){}；

當對應(yīng)事件被觸發(fā)時候就會自動執(zhí)行function中的代碼。

掌握了以上JavaScript，就可以做某寶里面的輪播圖片了！

言

　　作為一個前端工程師，無論公司是什么行業(yè)，無論你做什么端，基本都會遇到一個避不開的動畫效果：循環(huán)輪播。做輪播并不難，市場上的輪播插件有很多，其中比較著名的是swiper，使用也非常簡單。但輪播插件這種東西總歸是不靈活的，一些簡單的場景還可以應(yīng)付，比較復(fù)雜一點的場景處理起來就比較麻煩了。今天我會全程帶大家來寫一個循環(huán)輪播，用到的技術(shù)有：html、css、JavaScript、jQuery，都是前端最基礎(chǔ)的技術(shù)，有基礎(chǔ)又愛學(xué)肯學(xué)的你一定一聽就會，如果不會咋整？那多看幾遍。

　　1. 效果展示

　　以小米官網(wǎng)的圖片輪播為例，實際上千篇一律，好啦，看下圖：

　　　好啦，看效果，不要看妹子，雖然妹子長得是很好看啦！

　　2. 原理分析

　　無限循環(huán)輪播的原理是在展示內(nèi)容的前后各放一組圖片，以無限循環(huán)展示3張照片為例，三張圖片我給它取名為1.jpg,2.jpg,3.jpg,圖片展示分別如下：

　　原理示意圖展示：

　　原理其實就是復(fù)制兩組同樣的照片分別放在前面和后面(實際上不用完全復(fù)制兩組，只需要前面可以看到1.jpg，后面也可以到1.jpg就好了，但這里我為了方便大家理解，就采用這樣的方式了)。當點左邊按鈕，圖片輪播到第一張1.jpg時，讓盛放圖片的容器瞬間拉回到第二張1.jpg照片的位置，注意一定要是瞬間。同理，當點右邊按鈕時，圖片輪播到第三張1.jpg的時候，也讓盛放圖片的容器瞬間拉回到第二張1.jpg照片的位置。這是實現(xiàn)圖片循環(huán)輪播的關(guān)鍵，稍后會仔細講解。

　　3. 代碼

　　html代碼：

<div class="slideImageContainer">
    <div class="slideImageLists">
        <img src="1.jpeg" />
        <img src="2.jpeg" />
        <img src="3.jpeg" />
        <img src="1.jpeg" />
        <img src="2.jpeg" />
        <img src="3.jpeg" />
        <img src="1.jpeg" />
        <img src="2.jpeg" />
        <img src="3.jpeg" />
    </div>
    <div class="slideLeftBtn" id="slideLeftBtn"></div>
    <div class="slideRightBtn" id="slideRightBtn"></div>
</div>

　　css 代碼：

*{
    padding: 0;
    margin: 0;
}
@font-face {
    font-family: 'iconfont';  /* project id 208314 */
    src: url('//at.alicdn.com/t/font_208314_2l9oi1sn4hmh1tt9.eot');
    src: url('//at.alicdn.com/t/font_208314_2l9oi1sn4hmh1tt9.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_208314_2l9oi1sn4hmh1tt9.woff') format('woff'),
    url('//at.alicdn.com/t/font_208314_2l9oi1sn4hmh1tt9.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_208314_2l9oi1sn4hmh1tt9.svg#iconfont') format('svg');
}
.slideImageContainer{
    position: relative;
    width: 600px;
    height: 300px;
    margin: 0 auto;
    border: solid 1px red;
    overflow: hidden;
}
.slideImageLists{
    position: absolute;
    left: -1800px;
    top: 0;
    width: 10000px;
    height: 300px;
}
.slideImageLists img{
    display: block;
    width: 600px;
    height: 300px;
}
.slideLeftBtn,.slideRightBtn{
    position: absolute;
    font-family: "iconfont";
    font-size: 60px;
    top: 120px;
    color: #191f25;
    opacity: 0.3;
    cursor: pointer;

    user-select: none;  
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.slideLeftBtn:hover,.slideRightBtn:hover{
    opacity: 0.6;
}
.slideLeftBtn{
    left: 10px;
}
.slideRightBtn{
    right: 10px;
}

　　頁面布局是很重要的一部分內(nèi)容，它是頁面的基石。頁面布局寫得好實現(xiàn)效果的時候能帶來很大的方便。因此這里強調(diào)幾個應(yīng)該注意的地方：

　　1. 所有的圖片要放在一個很長的容器中，這里是slideImageList，每次移動實際上就是它在相對于他的父元素slideImageContainer而移動，所以需要給slideImageContainer 一個 position:relative 的定位，給 slideImageList 一個 position: absoluete 的定位。

　　2. slideImageList要放在一個比較小的容器中，在這里是slideImageContainer，作用是為了顯示你想要顯示的區(qū)域，注意要加 overflow:hidden 屬性，讓多余的內(nèi)容不顯示。

　　3. 左右按鈕我采用的是iconfont的使用方式，這個比較簡單，此處不多加以闡述。不會使用iconfont的同學(xué)可以直接貼兩個圖片或者左右箭頭符號在上面。

　　4. 容器slideImageList中的圖片要排列在一條直線上，并且初始情況下需要給slideImageList一個left值，因為最開始我們想讓第四張照片展示，所以此時的left值為-1800px，要記住這個值，因為我們待會兒要常用到這個值。

　　5. @font-face 是引入 iconfont 相關(guān)的資源內(nèi)容，不使用iconfont的可忽略。

　　接下來看javascript代碼：

var slideIndex = 3;   //記錄初始圖片的下標( 默認最初展示第四張圖片，下標從0開始，所以初始值為3 )
//左邊按鈕的點擊事件
$("#slideLeftBtn").on("click",function(){
    // 點擊左按鈕的時候想要顯示當前圖片的前一張，所以slideIndex值要減去1
    slideIndex--;
    // animateLength表示想要讓slideImageLists移動到什么位置，slideImageLists 的位置由 left屬性來控制
　　 var animateLength = slideIndex * (-600) + "px";
    $(".slideImageLists").animate({"left":animateLength},"slow",function(){
        // animate的回調(diào)函數(shù)(即執(zhí)行完動畫之后才會執(zhí)行函數(shù)里面的內(nèi)容)
        if(slideIndex <= 0){
            $(".slideImageLists").css({"left":"-1800px"});
            slideIndex = 3;
        }
    });
})
//右邊按鈕的點擊事件
$("#slideRightBtn").on("click",function(){
    // 點擊右按鈕的時候想要顯示當前圖片的后一張，所以slideIndex值要加上1
    slideIndex++;
    var animateLength = slideIndex * (-600) + "px";
    $(".slideImageLists").animate({"left":animateLength},"slow",function(){
　　　　　if(slideIndex >= 6){
            $(".slideImageLists").css({"left":"-1800px"});
            slideIndex = 3;
        }
    })
})

　　現(xiàn)在著重來分析一下JavaScript的代碼，同樣有幾個關(guān)鍵點需要注意，其中部分我已在代碼中注釋：

　　1. 全局變量 slideIndex 指的是圖片的下標，一共有九張照片，下標從0開始，所以九張照片的下標值分別為0-8，此處我們默認展示第四張照片，所以slideIndex 的初始值置為 3 。另外需要注意的是，slideIndex 是全局變量，所以函數(shù)內(nèi)函數(shù)外都可以訪問到，并且只初始化一次。

　　2. 局部變量 animateLength 指的是想要 slideImageLists 運動到的位置，注意要加單位，并且需要賦值給 slideImageList 的 left 屬性。

　　3. jQuery的 animate 方法 ,詳情見下圖：

　　接下來完整地分析一下流程，以點擊左按鈕為例：

　　1. 初始情況下展示第四張圖片，下標為 3 。 ( var slideIndex = 3 )

　　2. 給左按鈕綁定一個點擊事件

　　3. 點擊左按鈕的時候，想要展示當前照片的前一張，所以圖片下標需要減去1 ( slideIndex-- )

　　4. 計算 slideImageLists 要移動的位置（ slideIndex * (-600) + "px" ），記得加單位。為什么要乘以 -600 ，首先 600 是一張照片的寬度，上面我們分析過了如果要默認展示第四張照片的話 slideImageLists 的 left 屬性值為 -1800px，同理，點擊左按鈕，想要展示第三張照片，那么此時需要 slideImageLists 的 left 屬性值為 -1200px，所以就是 ( 3 - 1 ) * ( -600 ) + "px" = -1200px 。

　　5. 利用 animate 來執(zhí)行動畫。將上一步計算出來的值賦值給 slideImageLists 的 left 屬性。注意 animate方法本身就是含有過渡的，所以切記不需要在 slideImageLists 上面再加 transtion 屬性來實現(xiàn)過渡。

　　6. 實現(xiàn)循環(huán)輪播的重點來了。以上步驟實現(xiàn)了輪播，但沒有實現(xiàn)循環(huán)輪播，回憶我們剛才講的內(nèi)容，一共有三組 1.jpg、2.jpg、3.jpg 這張照片，默認展示第四張照片，也就是第二組照片中的 1.jpg ，如果點擊左按鈕，會分別展示第一組照片中的 3.jpg 、2.jpg、1.jpg , 假設(shè)一直點擊左按鈕，展示到第一張照片，也就是第一組的 1.jpg 的時候，此時圖片的下標 slideIndex 的值為 0 。當此時展示的圖片的下標 slideIndex 的值為 0 并且執(zhí)行完這個動畫的時候，我們需要做一個操作，將 slideImageLists 的 left 值瞬間改變?yōu)?-1800px，這個值我們上面強調(diào)過了，是初始情況下展示第四張照片也就是第二組中的 1.jpg 的時候 slideImageLists 的 left 值，并且將當前展示的圖片的下標 slideIndex 的值變?yōu)?3 。

　　animate有一個非常方便的地方在于他提供了一個回調(diào)函數(shù)，回調(diào)函數(shù)在動畫執(zhí)行完之后自己執(zhí)行。

　　另外，這里還有一個需要格外注意的地方，我們一直強調(diào)一定要瞬間將 slideImageLists 拉回到 left 值為 -1800px 的地方，那是因為如果也類似于用animate來實現(xiàn)的話用戶會看到一個動畫的過程，這是我們不能接受的。所以在瞬間拉回的時候我采用的是jQuery的css方法去改變 left 屬性。

　　不完美的地方

　　但是講到這里，實際上還是有不完美的地方，如果你多次點擊按鈕，就會發(fā)生錯亂，此時我們需要做的是在動畫的執(zhí)行過程中點擊按鈕無效，只有動畫結(jié)束完成才可以繼續(xù)點擊實現(xiàn)動畫。我這里采用的方案是引入一個布爾類型的變量 isClickable，初始值為true，表示初始情況下可點擊。當用戶點擊按鈕的時候會進行判斷當前 isClickable 的值，如果值為true的時候才會去執(zhí)行 slideIndex-- 的操作，否則會 return false ,不會再執(zhí)行下面的代碼。

　　此時我們來分析一下流程：

　　1. 初始情況下isClickable的值為true，表示當前按鈕是可以點擊的。

　　2. 此時我們?nèi)c擊左按鈕，isClickable 的值為 true , 會執(zhí)行slideIndex-- 的操作。并且將 isClickable的值設(shè)置為 false，表示現(xiàn)在已經(jīng)處在動畫中。此時再去點擊左按鈕就無法再執(zhí)行slideIndex--的操作，而是進入 return false，終止當前代碼。

　　3. 需要注意的是，我們需要在動畫執(zhí)行完成后，也就是在回調(diào)函數(shù)中將 isClickable 的值變?yōu)?true，所以當動畫結(jié)束后再點擊按鈕的時候就可以進行下一次動畫了。

　　具體代碼如下：

var isClickable = true;   // 是否可點擊，默認可點擊
var slideIndex = 3;   
$("#slideLeftBtn").on("click",function(){
    if(isClickable == true){
        slideIndex--;
    }else{
        return false;
    }
    isClickable = false;
    var animateLength = slideIndex * (-600) + "px";
    $(".slideImageLists").animate({"left":animateLength},"slow",function(){
        isClickable = true;
        if(slideIndex <= 0){
            $(".slideImageLists").css({"left":"-1800px"});
            slideIndex = 3;
        }
    });
})

xxxxxxxxxxbr var isClickable = true;   // 是否可點擊，默認可點擊brvar slideIndex = 3;   br$("#slideLeftBtn").on("click",function(){br    if(isClickable == true){br        slideIndex--;br    }else{br        return false;br    }br    isClickable = false;br    var animateLength = slideIndex * (-600) + "px";br    $(".slideImageLists").animate({"left":animateLength},"slow",function(){br        isClickable = true;br        if(slideIndex <= 0){br            $(".slideImageLists").css({"left":"-1800px"});br            slideIndex = 3;br        }br    });br})

　　以上就是左按鈕點擊時候的思路，點擊右按鈕的思路和點擊左按鈕的思路是一樣的，相信聰明的你一定能夠一點即通，有問題歡迎大家和我交流。

　　祝工作順利 ~

著前端新技術(shù)的不斷更新。很多用戶體驗效果也要不斷的增強，今天主要講解的實例是jquery實現(xiàn)動畫加載條跟滾動輪播圖效果，這2種效果相信大家并不陌生。實現(xiàn)的做法也很多，下面涉及的主要是jquery實現(xiàn)。誰有更好的寫法，敬請分享出來！

效果：

加載到100%后就緩慢彈出輪播圖！

實現(xiàn)的代碼看下面

html布局：

css樣式:

jquery代碼：

在線咨詢

上一篇：JavaScript HTML DOM-改變 HTML
下一篇：HTML表單元素初識2-零基礎(chǔ)自學(xué)網(wǎng)頁制作

您的項目需求

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

整合營銷服務(wù)商

JavaScript學(xué)習(xí)筆記：掌握了獲取元素和事件綁定，可以做輪播圖片

言

1. 效果展示

2. 原理分析

3. 代碼

不完美的地方

您的項目需求

　　1. 效果展示

　　2. 原理分析

　　3. 代碼

　　不完美的地方