30_用js實(shí)現(xiàn)一個(gè)輪播圖效果佣渴，簡(jiǎn)單說(shuō)下原理

一、原理

將一些圖片在一行中平鋪初斑，然后計(jì)算偏移量再利用定時(shí)器實(shí)現(xiàn)定時(shí)輪播辛润。

步驟一：建立html基本布局

如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>輪播圖</title>
</head>
<body>
    <div class="container">
        <div class="wrap" style="left:-600px;">
            <img src="./img/5.jpg" alt="">
            <img src="./img/1.jpg" alt="">
            <img src="./img/2.jpg" alt="">
            <img src="./img/3.jpg" alt="">
            <img src="./img/4.jpg" alt="">
            <img src="./img/5.jpg" alt="">
            <img src="./img/1.jpg" alt="">
        </div>
        <div class="buttons">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
        <a href="javascript:;" class="arrow arrow_left">&lt;</a>
        <a href="javascript:;" class="arrow arrow_right">&gt;</a>
    </div>
</body>
</html>

只有五張圖片，卻使用7張來(lái)輪播见秤，這是為了實(shí)現(xiàn)無(wú)縫輪播砂竖，后面會(huì)詳細(xì)介紹真椿。

而5個(gè)span，即我們可以實(shí)時(shí)看到輪播圖目前所處的位置乎澄。

最后是兩個(gè)按鈕突硝，可以通過(guò)它來(lái)控制前進(jìn)與后退。

這里我們需要對(duì)wrap使用絕對(duì)定位置济，所以用left:-600px;將第一張圖片顯示出來(lái)解恰。

步驟二： css布局

首先，reset css浙于，如下所示：

* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}

接著护盈，我們?yōu)榱俗寛D片只在container中，所以需要限定其寬度和高度并且使用overflow:hidden路媚；將其余的圖片隱藏起來(lái)黄琼，并且我們希望wrap相對(duì)于container左右移動(dòng)，所以設(shè)置為relative整慎，如下：

.container {
    position: relative;
    width: 600px;
    height: 400px;
    margin:100px auto 0 auto;
    box-shadow: 0 0 5px green;
    overflow: hidden;
}

我們?cè)O(shè)置wrap是絕對(duì)定位的脏款，所以我們就可以通過(guò)控制Left和Right來(lái)控制圖片的移動(dòng)了。設(shè)置z-index:1;以對(duì)后面將要放置的buttons作為參考裤园。因?yàn)楣灿衅邚垐D片撤师，所以width為4200px（每張圖片我們?cè)O(shè)置為600X400）,我們只需讓圖片左浮動(dòng)即可實(shí)現(xiàn)占滿(mǎn)一排了。

.wrap {
    position: absolute;
    width: 4200px;
    height: 400px;
    z-index: 1;
}

然后我們把圖片設(shè)置為左浮動(dòng)拧揽，并限定其大小剃盾，如下所示：

.container .wrap img {
    float: left;
    width: 600px;
    height: 400px;
}

即這時(shí)已經(jīng)顯示出了第一張圖片。并且充滿(mǎn)了整個(gè)container(container是有box-shadow的);

然后我們把顯示次序的buttons放在圖片的右下角淤袜。并且設(shè)置z-index:2;以保證buttons是在圖片的上面的痒谴。

.container .buttons {
    position: absolute;
    right: 150px;
    bottom:20px;
    width: 100px;
    height: 10px;
    z-index: 2;
}

然后將buttons下面的span做一個(gè)簡(jiǎn)單的修飾，并且給和圖片對(duì)應(yīng)的span設(shè)置一個(gè)on類(lèi)铡羡，如下：

.container .buttons span {
    margin-left: 5px;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: green;
    text-align: center;
    color:white;
    cursor: pointer;
}
.container .buttons span.on{
    background-color: red;
}

接下來(lái)积蔚，我們把左右切換的箭頭加上，然后做簡(jiǎn)單的修飾烦周，注意：因?yàn)檫@里使用實(shí)體來(lái)表示左右箭頭尽爆，所以設(shè)置font-size才能改變其大小

.container .arrow {
    position: absolute;
    top: 35%;
    color: green;
    padding:0px 14px;
    border-radius: 50%;
    font-size: 50px;
    z-index: 2;
    display: none;
}
.container .arrow_left {
    left: 10px;
}
.container .arrow_right {
    right: 10px;
}
.container:hover .arrow {
    display: block;
}
.container .arrow:hover {
    background-color: rgba(0,0,0,0.2);
}

步驟三：添加js邏輯

我們首先獲取到 wrap（因?yàn)橐O(shè)置其left才能控制輪播圖），然后獲取到左右兩個(gè)箭頭读慎，并實(shí)現(xiàn)手動(dòng)輪播漱贱，如下：

var wrap = document.querySelector(".wrap");
var next = document.querySelector(".arrow_right");
var prev = document.querySelector(".arrow_left");
next.onclick = function () {
    next_pic();
}
prev.onclick = function () {
    prev_pic();
}
function next_pic () {
    var newLeft = parseInt(wrap.style.left)-600;
    wrap.style.left = newLeft + "px";
}
function prev_pic () {
    var newLeft = parseInt(wrap.style.left)+600;
    wrap.style.left = newLeft + "px";
}

值得注意的是，這里wrap.style.left是一個(gè)字符串夭委，所以要轉(zhuǎn)化為數(shù)字才能進(jìn)行計(jì)算幅狮，而設(shè)定left時(shí)就要加上px成為一個(gè)字符串了。

在第一頁(yè)時(shí)，left值為-600彪笼，所以我們可以點(diǎn)擊一次上一張钻注，但是當(dāng)再點(diǎn)擊一次時(shí)，就出現(xiàn)了空白配猫。同樣的幅恋，下一張點(diǎn)擊，到-3600是最后一張泵肄，就不能再繼續(xù)點(diǎn)擊了捆交。

也就是說(shuō)，當(dāng)我們點(diǎn)擊下一張到-3600px（這是第一張圖片）時(shí)腐巢，我們需要下次跳轉(zhuǎn)到第二張品追，即-1200px；這樣才能正常跳轉(zhuǎn)冯丙；

同理肉瓦，當(dāng)我們點(diǎn)擊上一張到0px（這是第五張圖片時(shí)），我們希望下次跳轉(zhuǎn)到第四張胃惜，即-2400px泞莉；

按照這樣的思路我們重新將next_pic和prev_pic函數(shù)修改如下：

function next_pic () {
    var newLeft;
    if(wrap.style.left === "-3600px"){
        newLeft = -1200;
    }else{
        newLeft = parseInt(wrap.style.left)-600;
    }
    wrap.style.left = newLeft + "px";
}
function prev_pic () {
    var newLeft;
    if(wrap.style.left === "0px"){
        newLeft = -2400;
    }else{
        newLeft = parseInt(wrap.style.left)+600;
    }
    wrap.style.left = newLeft + "px";
}

這時(shí)，我們就可以發(fā)現(xiàn)圖片可以循環(huán)播放了船殉！

但是鲫趁，這時(shí)我們僅僅是手動(dòng)循環(huán)播放的，我們?nèi)绻Ｍ詣?dòng)播放利虫，使用setInterval()即可挨厚，如下所示：

var timer = null;
function autoPlay () {
    timer = setInterval(function () {
        next_pic();
    },1000);
}
autoPlay();

即先設(shè)定一個(gè)計(jì)時(shí)器，然后創(chuàng)建一個(gè)可以自動(dòng)播放的函數(shù)糠惫，最后調(diào)用這個(gè)函數(shù)即可疫剃。現(xiàn)在它就可以自動(dòng)播放了。

但是如果我們想要仔細(xì)看其中一個(gè)圖片的時(shí)候硼讽，我們希望輪播圖停止播放慌申，只要clearInterval()即可，如下：

var container = document.querySelector(".container");
container.onmouseenter = function () {
    clearInterval(timer);
}
container.onmouseleave = function () {
    autoPlay();    
}

現(xiàn)在理郑，只要我們把鼠標(biāo)移入輪播圖中，這時(shí)輪播圖就不會(huì)播放了咨油。而移開(kāi)鼠標(biāo)之后您炉，輪播圖自動(dòng)播放。

但是到目前為止役电，輪播圖下方的小圓點(diǎn)還沒(méi)有動(dòng)赚爵，現(xiàn)在我們就實(shí)現(xiàn)它。

原理很簡(jiǎn)單，即設(shè)置buttons的index初始值為0冀膝，即第一個(gè)span的class為on唁奢，然后觸發(fā)next_pic函數(shù)時(shí)，index加1窝剖，當(dāng)觸發(fā)prev_pic函數(shù)時(shí)麻掸，index減1，并設(shè)置當(dāng)前index的小圓點(diǎn)的class為on赐纱，這就要求index必須設(shè)置為全局變量脊奋，才能保證它在每一個(gè)函數(shù)的作用域中。

添加showCurrentDot函數(shù)：

var index = 0;
var dots = document.getElementsByTagName("span");
function showCurrentDot () {
    for(var i = 0, len = dots.length; i < len; i++){
        dots[i].className = "";
    }
    dots[index].className = "on";
}

在next_pic中添加代碼：

index++;
if(index > 4){
    index = 0;
}

在prev_pic中添加代碼：

index--;
if(index < 0){
    index = 4;
}
showCurrentDot();

這樣疙描，輪播圖就可以自動(dòng)切換诚隙，并且小圓點(diǎn)也在隨著圖片的變化而變化了。

但是起胰，這距離我們經(jīng)尘糜郑看到的輪播圖還有一定距離 - - - 當(dāng)點(diǎn)擊小圓點(diǎn)時(shí)，就可跳轉(zhuǎn)到相應(yīng)圖片效五。實(shí)現(xiàn)原理即：點(diǎn)擊小圓點(diǎn)地消，就使wrap的Left變成相應(yīng)的值。代碼如下：

for (var i = 0, len = dots.length; i < len; i++){
    (function(i){
        dots[i].onclick = function () {
            var dis = index - i;
            if(index == 4 && parseInt(wrap.style.left)!==-3000){
                dis = dis - 5;     
            }
            //和使用prev和next相同火俄，在最開(kāi)始的照片5和最終的照片1在使用時(shí)會(huì)出現(xiàn)問(wèn)題犯建，導(dǎo)致符號(hào)和位數(shù)的出錯(cuò)，做相應(yīng)地處理即可
            if(index == 0 && parseInt(wrap.style.left)!== -600){
                dis = 5 + dis;
            }
            wrap.style.left = (parseInt(wrap.style.left) +  dis * 600)+"px";
            index = i;
            showCurrentDot();
        }
    })(i);            
}

原理就是當(dāng)點(diǎn)擊到小圓點(diǎn)時(shí)瓜客，得到相應(yīng)的i值适瓦，這個(gè)i值也就是span的index值，我們拿他和全局變量index作比較谱仪，然后重新設(shè)置wrap.style.left的值玻熙，然后把i值復(fù)制給全局變量index，最后顯示當(dāng)前的小原點(diǎn)即可疯攒。值得注意的是：這里涉及到了閉包的概念嗦随，如果直接使用for循環(huán)，則不能得到正確的結(jié)果敬尺。

最終效果圖如下：

最終代碼如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<style>
    * {
        margin:0;
        padding:0;
    }
    a{
        text-decoration: none;
    }
    .container {
        position: relative;
        width: 600px;
        height: 400px;
        margin:100px auto 0 auto;
        box-shadow: 0 0 5px green;
        overflow: hidden;
    }
    .container .wrap {
        position: absolute;
        width: 4200px;
        height: 400px;
        z-index: 1;
    }
    .container .wrap img {
        float: left;
        width: 600px;
        height: 400px;
    }
    .container .buttons {
        position: absolute;
        right: 5px;
        bottom:40px;
        width: 150px;
        height: 10px;
        z-index: 2;
    }
    .container .buttons span {
        margin-left: 5px;
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: green;
        text-align: center;
        color:white;
        cursor: pointer;
    }
    .container .buttons span.on{
        background-color: red;
    }
    .container .arrow {
        position: absolute;
        top: 35%;
        color: green;
        padding:0px 14px;
        border-radius: 50%;
        font-size: 50px;
        z-index: 2;
        display: none;
    }
    .container .arrow_left {
        left: 10px;
    }
    .container .arrow_right {
        right: 10px;
    }
    .container:hover .arrow {
        display: block;
    }
    .container .arrow:hover {
        background-color: rgba(0,0,0,0.2);
    }
</style>
</head>
<body>
<div class="container">
    <div class="wrap" style="left: -600px;">
        <img src="./img/5.jpg" alt="">
        <img src="./img/1.jpg" alt="">
        <img src="./img/2.jpg" alt="">
        <img src="./img/3.jpg" alt="">
        <img src="./img/4.jpg" alt="">
        <img src="./img/5.jpg" alt="">
        <img src="./img/1.jpg" alt="">
    </div>
    <div class="buttons">
        <span class="on">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
    <a href="javascript:;" class="arrow arrow_left">&lt;</a>
    <a href="javascript:;" class="arrow arrow_right">&gt;</a>
</div>
<script>
    var wrap = document.querySelector(".wrap");
    var next = document.querySelector(".arrow_right");
    var prev = document.querySelector(".arrow_left");
    next.onclick = function () {
        next_pic();
    }
    prev.onclick = function () {
        prev_pic();
    }
    function next_pic () {
        index++;
        if(index > 4){
            index = 0;
        }
        showCurrentDot();
        var newLeft;
        if(wrap.style.left === "-3600px"){
            newLeft = -1200;
        }else{
            newLeft = parseInt(wrap.style.left)-600;
        }
        wrap.style.left = newLeft + "px";
    }
    function prev_pic () {
        index--;
        if(index < 0){
            index = 4;
        }
        showCurrentDot();
        var newLeft;
        if(wrap.style.left === "0px"){
            newLeft = -2400;
        }else{
            newLeft = parseInt(wrap.style.left)+600;
        }
        wrap.style.left = newLeft + "px";
    }
    var timer = null;
    function autoPlay () {
        timer = setInterval(function () {
            next_pic();
        },2000);
    }
    autoPlay();

    var container = document.querySelector(".container");
    container.onmouseenter = function () {
        clearInterval(timer);
    }
    container.onmouseleave = function () {
        autoPlay();    
    }

    var index = 0;
    var dots = document.getElementsByTagName("span");
    function showCurrentDot () {
        for(var i = 0, len = dots.length; i < len; i++){
            dots[i].className = "";
        }
        dots[index].className = "on";
    }

    for (var i = 0, len = dots.length; i < len; i++){
        (function(i){
            dots[i].onclick = function () {
                var dis = index - i;
                if(index == 4 && parseInt(wrap.style.left)!==-3000){
                    dis = dis - 5;     
                }
                //和使用prev和next相同枚尼，在最開(kāi)始的照片5和最終的照片1在使用時(shí)會(huì)出現(xiàn)問(wèn)題，導(dǎo)致符號(hào)和位數(shù)的出錯(cuò)砂吞，做相應(yīng)地處理即可
                if(index == 0 && parseInt(wrap.style.left)!== -600){
                    dis = 5 + dis;
                }
                wrap.style.left = (parseInt(wrap.style.left) +  dis * 600)+"px";
                index = i;
                showCurrentDot();
            }
        })(i);            
    }
</script>
</body>
</html>

二署恍、總結(jié)

實(shí)現(xiàn)一個(gè)輪播圖還是不難的，大體思路：先創(chuàng)建一個(gè)div蜻直，限定其寬度和高度盯质，overflow：hidden袁串，且設(shè)置其position為relative。然后創(chuàng)建一個(gè)裝圖片的div呼巷，寬度為所有圖片的總寬度囱修，且設(shè)置其position為absolute，并且使其中的內(nèi)容浮動(dòng)王悍，這樣所有的圖片就處于一行中破镰。然后為了實(shí)現(xiàn)無(wú)縫滾動(dòng)，所以需要在首尾分別添加一張過(guò)渡圖片配名。先添加兩個(gè)按鈕啤咽，使其可以手動(dòng)輪播，然后只需要添加一個(gè)定時(shí)器使其朝一個(gè)方向自動(dòng)輪播即可渠脉，因?yàn)橛脩?hù)有時(shí)需要查看詳情宇整，所以當(dāng)鼠標(biāo)進(jìn)入時(shí)就clear定時(shí)器，滑出再定時(shí)播放芋膘。為了更好地用戶(hù)體驗(yàn)鳞青，我們?cè)谙旅嫣砑恿艘慌判A點(diǎn)，用戶(hù)可以清楚地知道現(xiàn)在所處的位置为朋，最后臂拓，利用閉包使得用戶(hù)可以直接通過(guò)點(diǎn)擊小圓點(diǎn)切換圖片。

最后編輯于：2020.05.18 14:22:36

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末习寸，一起剝皮案震驚了整個(gè)濱河市胶惰，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌霞溪，老刑警劉巖孵滞，帶你破解...
沈念sama閱讀 219,270評(píng)論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異鸯匹，居然都是意外死亡坊饶，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,489評(píng)論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)殴蓬，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)匿级，“玉大人，你說(shuō)我怎么就攤上這事染厅《灰铮” “怎么了？”我有些...
開(kāi)封第一講書(shū)人閱讀 165,630評(píng)論 0贊 356
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵肖粮，是天一觀的道長(zhǎng)简逮。經(jīng)常有香客問(wèn)我，道長(zhǎng)尿赚，這世上最難降的妖魔是什么散庶？我笑而不...
開(kāi)封第一講書(shū)人閱讀 58,906評(píng)論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮凌净，結(jié)果婚禮上悲龟，老公的妹妹穿的比我還像新娘。我一直安慰自己冰寻，他們只是感情好须教，可當(dāng)我...
茶點(diǎn)故事閱讀 67,928評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著斩芭，像睡著了一般轻腺。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上划乖，一...
開(kāi)封第一講書(shū)人閱讀 51,718評(píng)論 1贊 305
城市分裂傳說(shuō)
那天贬养，我揣著相機(jī)與錄音，去河邊找鬼琴庵。笑死误算，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的迷殿。我是一名探鬼主播儿礼，決...
沈念sama閱讀 40,442評(píng)論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼庆寺！你這毒婦竟也來(lái)了蚊夫？” 一聲冷哼從身側(cè)響起，我...
開(kāi)封第一講書(shū)人閱讀 39,345評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤懦尝，失蹤者是張志新（化名）和其女友劉穎知纷，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體导披，經(jīng)...
沈念sama閱讀 45,802評(píng)論 1贊 317
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡屈扎，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,984評(píng)論 3贊 337
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了撩匕。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片鹰晨。...
茶點(diǎn)故事閱讀 40,117評(píng)論 1贊 351
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖止毕，靈堂內(nèi)的尸體忽然破棺而出模蜡，到底是詐尸還是另有隱情，我是刑警寧澤扁凛，帶...
沈念sama閱讀 35,810評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布忍疾，位于F島的核電站，受9級(jí)特大地震影響谨朝，放射性物質(zhì)發(fā)生泄漏卤妒。R本人自食惡果不足惜甥绿，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,462評(píng)論 3贊 331
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望则披。院中可真熱鬧共缕，春花似錦、人聲如沸士复。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 32,011評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)阱洪。三九已至便贵，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間冗荸，已是汗流浹背承璃。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 33,139評(píng)論 1贊 272
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留俏竞，地道東北人绸硕。一個(gè)月前我還...
沈念sama閱讀 48,377評(píng)論 3贊 373
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像魂毁，于是被迫代替她去往敵國(guó)和親玻佩。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,060評(píng)論 2贊 355

30_用js實(shí)現(xiàn)一個(gè)輪播圖效果能扒，簡(jiǎn)單說(shuō)下原理