用 jQuery 做個輪播

2019年8月24日 105次阅读 来源: UCCs

首次體驗jQuery 以後，體驗一下jQuery壯大的地方，做一個簡樸的輪播，完成圖片切換。

點擊按鈕切換輪播

頁面上面有三個img標籤用兩個div便簽包裹好，class=images是用來規劃的，平常不在規劃的標籤上面做任何操縱，class=window是用來做輪播窗口的。三個button按鈕，用於切換圖片。

首先把圖片一次排開，用class=images做規劃，給它加上display:flex就可以夠完成浮動，假如圖片浮動起來變形兇猛，能夠給它加上align-items:flex-start；
class=window是輪播用的可視窗口，設置為圖片的寬度；並加上overflow:hidden，隱蔽超越可視窗口部份；
用JS 來控制CSS來完成圖片切換，當我點擊按鈕，湧現對應圖片，當我點擊第1張按鈕按鈕時，觸發.on事宜后實行背面的函數，把圖片向左挪動到指定位置，其他兩個按鈕也是做相似效果；

如許做你會發明切換圖片太生硬了，這事我們能夠加上一點動畫過渡transtion:transform 0.5s，讓它切換時平緩一點。

<script src="https://code.jquery.com/jquery-3.1.0.js"></script> //jQuery 文件
<style>
    .images{
        display: flex;  /*讓圖片浮動起來*/
        align-items:flex-start; /*圖片浮動起來后，會變形*/
        border: 1px solid red;
        transition:transform 0.5s;  /*圖片切換時加上過渡*/
    }
    .window{
        border: 1px solid green;
        width:279px;    /*設置為圖片的寬度*/
        overflow: hidden;   /*超越的部份隱蔽起來*/
    }
</style>
<div class="window">
    <div class="images" id="images1">
        <img src="images/dog1.jpg" width=279>
        <img src="images/dog2.jpg" width=279>
        <img src="images/dog3.jpg" width=279>
    </div>
</div>
<button id='p1'>第1張</button>
<button id='p2'>第2張</button>
<button id='p3'>第3張</button>
<script>
    //當按鈕被點擊時，觸發背面的函數，將id為images1的元素向左挪動一段距離
    $(p1).on('click',function(){    
        $(images1).css({transform:'translateX(0)'})
    });
    $(p2).on('click',function({
        $(images1).css({transform:'translateX(-279px)'})
    });
    $(p3).on('click',function(){
        $(images1).css({transform:'translateX(-558px)'})
    })
</script>

jQuery API 用法
.on()語法：.on( events, handler(eventObject) )
events範例是String，一個或多個空格分開的事宜，比方click、keydown.myPlugin
handler(eventObject)範例是Function，事宜被動身時實行函數

.css()用法：獵取婚配元素鳩合中的第一個元素的款式屬性的值設置每一個婚配元素的一個或多個CSS屬性

CSS款式：
display：flex; flex規劃
align-items:flex-stare; 往側軸出發點靠
transition:transform 0.5s 動畫過渡

款式行動星散

用上面的要領，有一個題目就是HTML 和CSS 星散了，然則CSS 和JS 沒有星散，然則為何img標籤會有圖片的寬度呢？

實在img是一個可替代元素，在img內里的下載下來之前，瀏覽器不曉得img長什麼樣，所以須要先做一個佔位符來佔位，等圖片下載下來時替代掉佔位符，一旦頁面下載錯了就會看到佔位符；假如不必這個佔位符，瀏覽器就會隨意找個佔位符來佔位，等圖片下載下來后在替代這個佔位符，在替代的歷程當中，背面的內容要讓位置，這就是重排的歷程，迥殊斲喪CPU，所以圖片的寬高很主要，曉得圖片寬高就要寫上去。

假如做成CSS 和JS 星散，能夠像下面如許寫，就可以夠做到行動和款式星散：

<style>
    .position-1{
        transform:translate(0);
    }
    .position-2{
        transform:translate(-279px);
    }
    .position-3{
        transform:translate(-558px);
    }
</style>
<script>
    $(p1).on('click',function(){
        $(images1).removeClass('position-2').removeClass('position-3').addClass('position-1')
    });
    $(p2).on('click',function(){
        $(images1).removeClass('position-3').removeClass('position-1').addClass('position-2')
    });
    $(p3).on('click',function(){
        $(images1).removeClass('position-2').removeClass('position-1').addClass('position-3')
    });
</script>

然則這有一個題目，假如你頁面有許多圖片時，removeClass就會有許多，代碼就沒有那末整齊了，這個時刻就最好照樣用行動控制款式，由於沒有辦法部把一切的狀況都寫到JS 內里，所以只有效JS 動態天生CSS，所以不到萬不得已最好不要用。

反覆代碼優化

用JS 控制款式的代碼，能夠改寫一下，變得更簡約。

在button標籤表面在包裹一層div，假如用DOM 獵取內里的button的遞次該怎樣做呢？

<div id='buttons'>
    <button id='p1'>第1張</button>
    <button id='p2'>第2張</button>
    <button id='p3'>第3張</button>
</div>
var n;  //n存儲的是：p3是第幾個元素
var allButtons = p3.parentNode.children;    //先獵取到p3的一切兄弟元素
for(var i = 0; i < allButton.length; i++){  //遍歷這個數組
    if(allButtons[i] === p3){        //假如這數組中的第i個即是p3，那末i 的值就是p3的位置
        n = i+1;        //由於i 取值是0，1，2 所以須要加上1才獲得末了的效果
        break;      //找到就跳出if輪迴；
    }
}

假如不必jQuery，用DOM 供應的API 是要用6行代碼才完成。
那看看有jQuery 怎樣做呢

<div class="window">
    <div class="images" id="images1">
        <img src="images/dog1.jpg" width=279>
        <img src="images/dog2.jpg" width=279>
        <img src="images/dog3.jpg" width=279>
    </div>
<div id='buttons'>
    <button>第1張</button>
    <button>第2張</button>
    <button>第3張</button>
</div>
<script>
    var allButtons = $('#buttons > button');    //用jQuery 要領獵取一切子元素
    for(var i = 0; i < allButtons.length; i++){ //遍歷這個數組
        $(allButtons[i]).on('click',function(x){    //這裏要注意allButton[i]是DOM 對象，是沒有.on()要領的；用DOM 的話，要運用.onclick()要領，所以這裏要用$()來封裝，變成jQuery對象
            var index = $(x.currentTarget).index(); //jQuery 供應的信息都傳遞給了函數參數，currentTarget是監聽的誰人按鈕，用index就可以找到你要操縱元素的位置
            var n = index * -279;   //由於index 取值為[0,1,2]乘上圖片大小就可以抵達響應位置
            $('#images1').css({
                transform:'translate(' + n + 'px)'  //點擊時增加css
            })
        })
    }
</script>

jQuery API語法：
event.traget用戶點擊的誰人按鈕
event.currentTarget監聽的誰人按鈕
index()從婚配的元素中搜刮給定元素的索引值，從0最先計數。

用上面要領就可以夠把代碼變的更簡約。

自動輪播

下面來看下，假如我要做成自動播放應當怎弄呢？
先來做一個數數的歷程，每1s加1

var n = 0;
console.log(n);
setInteral(() => {
    n+=1;
    console.log(n);
},1000)

那假如我要完成0、1、2輪迴數數呢？

var n = 0;
console.log(n%3);   //用取余就可以夠
setInterval(()=>{
    n+=1;
    console.log(n%3);
},1000)

用它來做元素輪迴時不也很簡樸

輪迴播放

var n = 0;
var size = allButtons.length;   //有多少個按鈕能夠如許獵取
allButton.eq(n%size).trigger('clcik');   //用DOM API 能夠如許寫parentNode.children[n%size]，假如用jQuery 的話allButton[n%size]照樣DOM 對象，如許的還要在封裝，jQuery 供應了一個.eq()的要領
setInterval(()=>{
    n+=1;
    allButton.eq(n%size).trigger('clcik');
},1000)

jQuery API語法：
.eq(index)index是一個整數，指導元素的位置，以0為基數。
.trigger(eventType [, extraParameters ]) eventType範例是String，包括JS事宜的字符串，比方click或submit。

如許就可以夠完成自動輪播了，美中不足的是按鈕變化我們看不見，那把按鈕增加class看看

<style>
    .red{
        color:red;
    }
</style>
var n = 0;
var size = allButtons.length;
allButtons.eq(n%size).trigger('click').addClass('red');
var timerId = setInterval(function(){
    n+=1;
    allButtons.eq(n%size).trigger('click').addClass('red').siblings('.red').removeClass('red');   //siblings('.red').removeClass('red')獵取當前元素的兄弟元素，刪除它的class
})

jQuery API語法：
.siblings( [selector ] )範例是Selector，能夠獵取每一個元素的兄弟元素

如今能夠看到每張圖片輪番播放，按鈕色彩也跟着轉變。

進入或脫離輪播窗口也能播放

然則如今有一個題目，當我鼠標進入輪播頁面，它不能住手播放，那下面來看看怎樣完成

$('.window').on('mouseenter',function(){
    window.clearsetInterval(timerId)    //當鼠標進入'class=window'窗口時，觸發消滅延時實行函數
})
$('.window').on('mouseleave',function(){
    timerId = setInterval(function(){
        allButtons.eq(n%size).trigger('click').addClass('red').siblings('.red').removerClass('red');  //當鼠標脫離'class=window'窗口時，繼承實行上面的延時實行函數
    },1000)
})

.mouseenter( handler(eventObject) )範例是Function，當鼠標進入觸發函數
.mouseleave( handler(eventObject) )範例是Function，當鼠標脫離進入觸發函數

修復一個小bug

這內里有一個小bug，輪播的 trigger('click')時候和.on('click')產生了爭執。在for輪迴中.on('click')的末了加上

n = index;
allButtons.eq(n).addClass('red').siblings('.red').removeClass('red');

以下：

var allButtons = $('#buttons > button');
for(var i = 0; i < allButtons.length; i++){
    $(allButtons[i]).on('click',function(x){
        var index = $(x.currentTarget).index();
        var p = index * -279;
        $(images1).css({
            transform:'translate('+ p + 'px)'
        });
        n = index;
        allButtons.eq(n).addClass('red').siblings('.red').removeClass('red');
    })
}

整頓代碼

整頓下方才寫的自動輪播的代碼

<script src="https://code.jquery.com/jquery-3.1.0.js"></script> //jQuery 文件
<style>
    .images{
        display: flex;  /*讓圖片浮動起來*/
        align-items:flex-start; /*圖片浮動起來后，會變形*/
        border: 1px solid red;
        transition:transform 0.5s;  /*圖片切換時加上過渡*/
    }
    .window{
        border: 1px solid green;
        width:279px;    /*設置為圖片的寬度*/
        overflow: hidden;   /*超越的部份隱蔽起來*/
    }
    .red{
        color:red;
    }
</style>
<div class="window">
    <div class="images" id="images1">
        <img src="images/dog1.jpg" width=279>
        <img src="images/dog2.jpg" width=279>
        <img src="images/dog3.jpg" width=279>
    </div>
</div>
<button id='p1'>第1張</button>
<button id='p2'>第2張</button>
<button id='p3'>第3張</button>
<script>
    //點擊按鈕切換
    var allButtons = $('#buttons > button');
    for(var i = 0; i < allButtons.length; i++){
        $(allButtons[i]).on('click',function(x){
            var index = $(x.currentTarget).index();
            var p = index * -279;
            $(images1).css({
                transform:'translate('+ p + 'px)'
            });
            n = index;
            allButtons.eq(n).addClass('red').siblings('.red').removeClass('red');
        })
    }
    //自動輪播
    var n = 0;
    var size = allButtons.length;
    allButtons.eq(n%size).trigger('click').addClass('red');
    var timerId = setInterval(function(){
        n+=1;
        allButtons.eq(n%size).trigger('click').addClass('red').siblings('.red').removeClass('red');   //siblings('.red').removeClass('red')獵取當前元素的兄弟元素，刪除它的class
    })
    
    //當鼠標進入輪播時，住手輪播
    $('.window').on('mouseenter',function(){
    window.clearsetInterval(timerId)    //當鼠標進入'class=window'窗口時，觸發消滅延時實行函數
})

    //當鼠標脫離輪播時，舉行舉行輪播
    $('.window').on('mouseleave',function(){
    timerId = setInterval(function(){
        allButtons.eq(n%size).trigger('click').addClass('red').siblings('.red').removerClass('red');  //當鼠標脫離'class=window'窗口時，繼承實行上面的延時實行函數
    },1000)
})
</script>

優化代碼

方才寫的自動輪播部份，有許多反覆的代碼，將它們優化一下

<script src="https://code.jquery.com/jquery-3.1.0.js"></script> //jQuery 文件
<style>
    .images{
        display: flex;  /*讓圖片浮動起來*/
        align-items:flex-start; /*圖片浮動起來后，會變形*/
        border: 1px solid red;
        transition:transform 0.5s;  /*圖片切換時加上過渡*/
    }
    .window{
        border: 1px solid green;
        width:279px;    /*設置為圖片的寬度*/
        overflow: hidden;   /*超越的部份隱蔽起來*/
    }
    .red{
        color:red;
    }
</style>
<div class="window">
    <div class="images" id="images1">
        <img src="images/dog1.jpg" width=279>
        <img src="images/dog2.jpg" width=279>
        <img src="images/dog3.jpg" width=279>
    </div>
</div>
<button id='p1'>第1張</button>
<button id='p2'>第2張</button>
<button id='p3'>第3張</button>
<script>

    //點擊按鈕切換圖片
    var allButtons = $('#buttons > button');
    for(var i = 0; i < allButtons.length; i++){
        $(allButtons[i]).on('click',function(x){
            var index = $(x.currentTarget).index();
            var p = index * -279;
            $(images1).css({
                transform:'translate('+ p + 'px)'
            });
            n = index;
            activeButton(allButtons.eq(n));
        })
    }
    
    //自動輪播
    var n = 0;
    var size = allButtons.length;
    allButtons.eq(n%size).trigger('click').addClass('red');
    var timerId = serTimer();
    
    //當鼠標進入輪播時，住手輪播
    $('.window').on('mouseenter',function(){
        window.clearsetInterval(timerId)    
    })

    //當鼠標脫離輪播時，舉行舉行輪播
    $('.window').on('mouseleave',function(){
        timerId = serTimer();
    })
    
    
    //設置自動輪播
    function serTimer(){
        return setInterval(function(){
            n+=1;
            playSlide(n%size);
        }
    }

    //輪播時切換圖片
    function playSlide(index){
        allButtons.eq(index).trigger('click'); 
    }
    
    //點擊按鈕圖片切換時，激活class
    function activeButton($button){
        $button.addClass('red').siblings('.red').removerClass('red');
    }
</script>

用到的jQuery API

末了整頓下這內里用到的jQuery API

  1. .on()語法：.on( events, handler(eventObject) )
  2. events範例是String，一個或多個空格分開的事宜，比方click、keydown.myPlugin
  3. handler(eventObject)範例是Function，事宜被動身時實行函數
  4. .css()用法：獵取婚配元素鳩合中的第一個元素的款式屬性的值設置每一個婚配元素的一個或多個CSS屬性
  5. event.traget用戶點擊的誰人按
  6. event.currentTarget監聽的誰人按鈕
  7. index()從婚配的元素中搜刮給定元素的索引值，從0最先計數。
  8. .eq(index)index是一個整數，指導元素的位置，以0為基數。
  9. .trigger(eventType [, extraParameters ]) eventType範例是String，包括JS事宜的字符串，比方click或submit。
  10. .siblings( [selector ] )範例是Selector，能夠獵取每一個元素的兄弟元素

總結

輪播所用的圖片一字排開，經由過程挪動位置，把響應的圖片呈如今視窗上。
自動輪播的關鍵是輪迴，只需會天然計數要領就可以控制个中的原理。

    原文作者：UCCs
    原文地址: https://segmentfault.com/a/1190000014942348
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞