手寫無縫輪播圖

時間 2019-11-17

標籤手寫無縫简体版

原文原文鏈接

輪播圖幾乎在每一個項目中都會有，今天寫了一個無逢輪播圖javascript

1、實現的功能：

1. 進入頁面，輪播圖自動向右切換css

2. 鼠標懸停在輪播圖部分時，輪播圖中止切換，鼠標離開繼續自動切換html

3. 鼠標懸停在下方的小圓點上時，自動切換到對應的圖片java

4. 鼠標點擊向左或向右按鈕時，圖片會向左或向右切換jquery

先來看一下效果圖吧！flex

這裏只能看到圖片，不能看到動態切換的效果，點擊下面的連接看一下效果吧！動畫

http://sandbox.runjs.cn/show/9b78sdiyui

2、無逢輪播圖實現原理：

所謂無逢輪播，就是幾張圖片向左或者向右切換，使最後一張圖片和第一張圖片首尾相連this

第一張圖片和最後一張圖片之間的切換，也像相鄰的圖片之間的切換同樣，實現幾張圖片左右滾動切換的效果spa

那麼，問題來了

怎樣使第一張圖片和最後一張圖片首尾相邊呢？

我是這樣作的

首先，須要一個div容器來包裹這個輪播圖部分，我給這個容器添加了類名carouselContainer，這個容器的寬度和高度設置爲圖片的寬度和高度，我設置的是500px* 300px，還須要設置一個屬性：overflow : hidden;

而後須要一個ul標籤來放置多張圖片，ul標籤的ID爲carousel

ul標籤中放置多個li標籤，每一個li標籤中都有一個img標籤，用來放置圖片，這幾個標籤向左浮動，在實現圖片切換的時候，只須要移動ul便可

這部分是重點！

若是有3張圖片，那我須要4個li標籤，前三個li標籤中放的是這三張圖片，最後一個li中放的是第一張圖片

若是有4張圖片，那就須要5個li標籤，前4個li標籤放的是這4張圖片，最後一個li中放的是第一張圖片以此類推

在這裏，我就以3張圖片爲例啦！

爲了方便理解，畫了個草圖

首先，容器中顯示的是第一張圖片，即索引爲0的粉色部分，（0、一、二、3分別表明幾張圖片的索引值）向右切換時顯示的應該是0、一、二、0、一、2...

那麼3有什麼做用呢？

這裏就是重點中的重點啦

當圖片切換到2時，下一張是3，這時再切換時，切換到3

當前圖片是3，3和1是同一張圖徵，再切換應該切換到2

若是當前圖片是3，同時又要向右切換，咱們就把整個ul的margin-left設置爲0，而後再讓整個ul向左移動，移動到1（這裏咱們覺得看到的是第一張圖片，實際上是由於第一張圖片和最後一張圖片是同樣的，咱們這時看到的是最後一張圖片）

若是當前圖片是0，同時又要向左切換，咱們就把整個ul的margin-left設置爲3*每張圖片的寬度，再讓整個ul向右移動，移動到2

這樣就實現了第一張圖片和最後一張圖片的首尾相連。

好了，原理就是這樣了

3、接下來就是具體的代碼實現了

1. html部分　

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>無縫輪播圖</title>
    <script type="text/javascript" src="js/jquery/jquery-3.2.1.min.js"></script>
</head>
<body>
<body>

<div class="container">
    <h2>無縫輪播圖</h2>
    <div class="carouselContainer">        
        <ul id="carousel">
            <li><img src="img/01.jpg"></li>
            <li><img src="img/02.jpg"></li>
            <li><img src="img/03.jpg"></li>
            <li><img src="img/04.jpg"></li>
            <li><img src="img/05.jpg"></li>
            <li><img src="img/01.jpg"></li>
        </ul>
        <div class="arrowItems">
            <div class="left">‹</div>
            <div class="right">›</div>
        </div>
        <div class="dots">
            <div class="dot current"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </div>
</div>

</body>
</html>

2. css部分

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    .container {
        width: 600px;
        margin: 0 auto;
        margin-top: 100px;
        text-align: center;
    }
    .carouselContainer {
        width: 500px;
        height: 300px;
        border: 1px solid #eee;
        margin: 0 auto;
        margin-top: 20px;
        overflow: hidden;
        position: relative;
        border-radius: 5px;
    }
    #carousel {
        font-size: 0px;
        display: flex;
    }
    .arrowItems {
        position: absolute;
        width: 100%;
        font-size: 60px;
        display: flex;
        top: 50%;
        justify-content: space-between;
        height: 60px;
        transform: translateY(-50%);
    }
    .arrowItems div {
        width: 30px;
        text-align: center;
        line-height: 46px;
        vertical-align: middle;
        background: rgba(0, 0, 0, 0.2);
        cursor: pointer;
        color: rgba(255, 255, 255, 0.4);
    }
    .arrowItems div:hover {
        background: rgba(0, 0, 0, 0.5);
        color: rgba(255, 255, 255, 0.6);
    }
    .dots {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 25px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 3px;
    }
    .dot {
        width: 12px;
        height: 12px;
        background: #fff;
        float: left;
        border-radius: 6px;
        margin: 0 3px;
    }
    .current {
        background: red;
    }

</style>

3. js部分

<script type="text/javascript">

    var picIndex = 0;
    //爲小圓點綁定鼠標通過事件
    $('.dots div').mouseover(function(){
        picIndex = $(this).index();
        var left = -(picIndex) * 500 + 'px';
        //鼠標通過小圓點時，切換對應的圖片
        $('#carousel').stop().animate({'margin-left': left});
        //當前小圓點爲紅色，其餘爲白色
        $(this).addClass('current').siblings().removeClass('current');
    });


    //自動播放
    autoplayCarousel();

    var timeId;
    function autoplayCarousel(){
        timeId = setInterval(function(){
            $('.arrowItems .right').click();
        }, 1000)
    }

    //右邊按鈕
    $('.arrowItems .right').click(function(){
        
        if(picIndex == $('#carousel li').length - 1) {
            picIndex = 0;
            $('#carousel').css({'margin-left': '0px'});
        }
        picIndex ++;
        var left = -(picIndex) * 500 + 'px';
        $('#carousel').stop().animate({'margin-left': left});

        //控制小圓點
        if(picIndex == $('#carousel li').length - 1) {
            $('.dots div').eq(0).addClass('current').siblings().removeClass('current');
        }else {
            $('.dots div').eq(picIndex).addClass('current').siblings().removeClass('current');
        }
    });
    //左邊按鈕
    $('.arrowItems .left').click(function(){
        
        if(picIndex == 0) {
            picIndex = $('#carousel li').length - 1;
            $('#carousel').css({'margin-left': -($('#carousel li').length - 1) * 500 + 'px'});
        }
        picIndex --;
        var left = -(picIndex) * 500 + 'px';
        $('#carousel').stop().animate({'margin-left': left});

        //控制小圓點
        if(picIndex == $('#carousel li').length - 1) {
            $('.dots div').eq(0).addClass('current').siblings().removeClass('current');
        }else {
            $('.dots div').eq(picIndex).addClass('current').siblings().removeClass('current');
        }
    });

    $('.carouselContainer').mouseover(function(){
        clearInterval(timeId);
    });
    $('.carouselContainer').mouseout(function(){
        autoplayCarousel();
    });
</script>

以上就是所有的全碼了。

還能在線調試功能哦！

http://runjs.cn/code/9b78sdiy

4、在實現這個無逢輪播圖地過程當中也學到了一些知識，順便記錄下來

1. 子盒子在父盒子裏面水平垂直居中

垂直居中：

之前的垂直居中用的都是設置子盒子top: 50%; margin-top爲負的子盒子高度的一半

這個方法有侷限性，若是之後子盒子的高度變了，還須要再改一次子盒子的margin-top值

如今發現了一個完美的方式來設置子盒子在父盒子裏面垂直居中：

給子盒子設置top: 50%; transform: translateY(-50%);

top是相對於父盒子的高度設置的，transform是相對於子盒子自身的高度設置的，這樣，之後父盒子、子盒子的高度無論怎樣變化，子盒子都會在父盒子裏面垂直居中

水平居中也是同樣的，設置left: 50%; transform: translateX(-50%);

2. 動畫要先中止再動

在使用jquery的animate動畫時，若是屢次觸發動畫，會出現動畫錯亂的現象，好比輪播圖中的小圓點，若是鼠標一直在上面來回切換，圖片就會左右亂動

出現這個現象的緣由就是前一個動畫還沒中止，又要執行下一個動畫

解決辦法很簡單，就是先讓上一個動畫中止再執行下一個動畫，執行動畫前先中止上一個動畫

即代碼中的$('#carousel').stop().animate({'margin-left': left});

加stop()就解決這個問題了

3. 清除定時器

在這個輪播圖的例子中我設置了定時器來使圖片自動播放，當鼠標懸停在輪播圖區域時，須要中止自動播放，在鼠標離開輪播圖區域時，再開始自動播放

作法就是在須要自動播放時，設置定時器，給定時器綁定一個ID，var timeId = setInterval(function(){}, 1000);

在須要中止的時候經過clearInterval(timeId);來清除計時器

再須要自動播放時再經過timeId = setInterval(function(){}, 1000);來實現自動播放

這裏須要注意的是，這個timeId要設置成一個全局變量，不然，若是每次自動播放時都寫成var timeId = setInterval(function(){}, 1000);這裏的timeId是一個新的變量，清除計時器時清除的也不是同一個計時器，這樣就會出現播放錯亂的現象，因此要設置成一個全局變量。

4. 圖片放在一塊兒時會有逢隙

圖片放在一塊兒時，中間會有逢隙，好比輪播圖中，我給ul標籤中的li設置了float: left; 向左浮動，可是圖片之間會有一個逢隙，這樣很差控制圖片的移動。

網上的解決辦法有不少，在這裏，我採用了最簡單的解決辦法，就是給父盒子設置，font-size: 0px;

這樣，圖片之間就沒胡逢隙了。

若是對您有幫助，記得點贊哦！須要您的支持與鼓勵，同時也歡迎您留下寶貴意見！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。