原生JS實現輪播圖--第一章圖片展現

時間 2019-11-16

原文原文鏈接

首先實現一個功能時，要從總體考慮，將大功能分解爲多個小功能，在輪播圖的實現中，首先最直觀的，是展現出來的和未展現出來的足多張圖片、可點擊的多個按鈕和底部提示圓點，這三部分；其次是在不進行任何操做的狀況下，圖片會自動朝一個方向循環滾動；最後是點擊不一樣的按鈕，圖片會朝不一樣的方向滾動。css

注：本實例使用VSCode進行編程，Chrome瀏覽器演示效果。html

本篇文章主要講解輪播圖製做的第一步——靜態頁面的圖片展現，後續會繼續發佈用原生JS實現功能的部分。編程

圖片展現

首先從直觀視覺上看，有一張展現出來的圖和隱藏看不見的多張圖、左右兩個箭頭、以及底部的多個提示圓點。例以下圖：瀏覽器

這裏咱們插入三張圖，兩個箭頭和底部三個提示圓點。less

首先是基本的HTML代碼，以下：優化

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>static show</title>
</head>

<body>
    <div class="showContainer">
        <div class="container">     //包含全部圖片的容器
            <img src="../images/cat.jpg" alt="A cat">
            <img src="../images/dog1.jpg" alt="A dog">
            <img src="../images/dandelion.jpg" alt="dandelion">
        </div>

        <div class="dots">      //底部的提示圓點
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>

        <div class="left-triangle">     //向左箭頭
            <img src="../images/triangle.png" alt="指向左邊的箭頭">
        </div>
        <div class="right-triangle">        //向右箭頭
            <img src="../images/triangle.png" alt="指向右邊的箭頭">
        </div>
    </div>
</body>

</html>
複製代碼

結果如圖：動畫

此時沒有添加任何樣式，圖片大小不一，因此展現出來的有大有小；底部提示圓點此時還只是一個空的行內元素，不顯示；左右箭頭，我用了一張背景色是透明的，線條顏色爲白色的圖片代替，白色背景下的白色圖片固然看不見了。如今咱們給一個灰色的背景色 background: #aaa;，再來效果：ui

看紅色箭頭指向的地方就是我加載的，那兩張同樣的圖。可是，這兩個箭頭可不是我想要的樣子，如今就讓transform屬性來發揮它的力量吧！去這裏developer.mozilla.org/zh-CN/docs/…看看transform到底是怎麼回事兒吧！咱們如今只使用它的基本的旋轉功能。spa

transform: rotate(-90deg);  //逆時針旋轉90°
transform: rotate(90deg);   //順時針旋轉90°
複製代碼

效來看看效果：插件

哇！左右兩個箭頭也變出來了哦！可是，別忘了，咱們要的底部的提示圓點還在躲貓貓呢，那要怎麼把它們找出來呢？那就要須要給他一套新的裝備了。

咱們在給提示圓點換裝備以前，要先給他們把工做區搭建好，先把整體樣式顯示效果固定了。爲了方便觀察，我將展現區在瀏覽器窗口中居中顯示，並設置其寬高。

.showContainer{
    width: 356px;
    height: 200px;
    border: 10px solid maroon;         
    background-color: #AAA;             
    margin: 50px auto;
    position: relative;
    overflow: hidden;
}
複製代碼

由於包含圖片的容器container要根據其父元素showContainer來定位，因此須要設置其父元素position屬性爲relative,關於元素定位，請點擊developer.mozilla.org/zh-CN/docs/…查看詳情。由於展現區每次只須要展現區顯示一張圖便可，其餘圖片應該隱藏，利用overflow: hidden;實現隱藏。

效果以下：

再利用定位元素將圖片放在展現區中，且要設置圖片大小。

.container {
    width: 9999px;
    position: absolute;
    left: 0px;
}

.container > img {
    display: block;
    float: left;
    height: 200px;
}
複製代碼

其中container的寬度設置爲9999px是爲了能夠放下多張圖片；container中的img元素只須要設置heihgt便可，圖片會根據容器大小自適應展現。

注意：爲方便展現，此處採用了寬高比一致的圖片，只設置`height`，圖片會根據自身的寬高比獲得一樣的`width`，並且此處圖片容器`showContainer`寬高設置的剛好與圖片相適應，因此這裏的圖片自適應，是指圖片大小正好與我設置的容器大小吻合，並不是圖片隨意試應於任何容器（這種可能會出現，圖片被拉伸的狀況）。

如今的效果爲：

對了咱們好不容易變出來的左右箭頭還再也不展現區裏呢，一樣利用元素定位，將左右箭頭分別居中放在展現區的兩邊：

.left-triangle {
    position: absolute;
    top: 80px;
    cursor: pointer;
    left: 0;
    transform: rotate(90deg);
}

.right-triangle {
    position: absolute;
    top: 80px;
    cursor: pointer;
    right: 0;
    transform: rotate(-90deg);
}
複製代碼

效果以下：

在這裏咱們能夠多加一個小小的動畫效果：當鼠標移動到展現區裏面時，左右箭頭就顯示出來；當鼠標移出展現區的時候，左右箭頭就消失不見。利用:hover僞類模擬鼠標懸停效果：

/*初始狀態時，左右箭頭是隱藏的*/
.left-triangle, .right-triangle {
    display: none;
}
.showContainer:hover .left-triangle, {
    display: block;
}
.showContainer:hover .right-triangle {
    display: block;
}
複製代碼

好了如今提示圓點的工做區已經搭建好了，如今要給提示圓點一套新的裝備了：

首先，固定包好提示圓點的容器dots的位置：

.dots{
    width: inherit;
    position: absolute;
    bottom: 10px;
    text-align: center;
}
複製代碼

其寬度繼承其父元素showContainer的寬度，可隨父元素的大小變化而變化。

設置提示圓點的樣式：

.dots .dot{
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: orange;
    margin-right: 10px;
}
複製代碼

由於span元素時行內元素，只有在設置其display爲block或者inline-block後纔可設置其寬高，利用border-radius實現圓角。效果以下圖：

此時鼠標懸停在展現區中。

好了，到此爲止，全部靜態展現出來的東西都已經大功告成啦！

代碼優化

爲了提醒用戶左右箭頭和提示圓點都是能夠進行點擊的，當鼠標移動到這些圖標上面時，鼠標箭頭變成小手裝：

cursor: pointer;
複製代碼

將CSS代碼用.css文件引用到.html文件中;

<link rel="stylesheet" href="../styles/demo1.css">
複製代碼

將複用的樣式代碼提出來，做爲公用的樣式；
改變一下邊框和圓點顏色等。

最終代碼以下：

HTML代碼以下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>static show</title>
    <link rel="stylesheet" href="../styles/demo1.css">
</head>

<body>
    <div class="showContainer">
        <div class="container">
            <img src="../images/cat.jpg" alt="A cat">
            <img src="../images/dog1.jpg" alt="A dog">
            <img src="../images/dandelion.jpg" alt="dandelion">
        </div>

        <div class="dots">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
        <!--增長triangle類方便設置樣式-->
        <div class="left-triangle triangle">
            <img src="../images/triangle.png" alt="指向左邊的箭頭">
        </div>
        <div class="right-triangle triangle">
            <img src="../images/triangle.png" alt="指向右邊的箭頭">
        </div>
    </div>
</body>

</html>
複製代碼

CSS代碼以下：

.showContainer {
    width: 356px;
    height: 200px;
    border: 10px solid #f5bebe;
    margin: 50px auto;
    overflow: hidden;
    position: relative;
}

.container {
    width: 9999px;
    position: absolute;
    left: 0px;
}

.container>img {
    display: block;
    float: left;
    height: 200px;
}
.triangle{
    position: absolute;
    top: 80px;
    cursor: pointer;
    display: none;
    cursor: pointer;
}
.left-triangle {
    left: 0;
    transform: rotate(90deg);
}

.right-triangle {
    right: 0;
    transform: rotate(-90deg);
}

.showContainer:hover .triangle{
    display: block;
}
.dots{
    width: inherit;
    position: absolute;
    bottom: 10px;
    text-align: center;
}
.dots > .dot{
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #87837e;
    margin-right: 10px;
    cursor: pointer;
}
複製代碼

爲了顯示更加明顯的層級關係，改用less，使用VSCode插件——Easy Less，可在.less文件保的同時生成.css文件，本實例中，.less文件轉換的.css文件與上述徹底相同。

Less代碼以下：

.showContainer {
    width: 356px;
    height: 200px;
    border: 10px solid #f5bebe;
    margin: 50px auto;
    overflow: hidden;
    position: relative;
    .container {
        width: 9999px;
        position: absolute;
        left: 0px;
        img {
            display: block;
            float: left;
            height: 200px;
        }
    }
    
    .triangle {
        position: absolute;
        top: 80px;
        cursor: pointer;
        display: none;
        cursor: pointer;
        &.left-triangle {
            left: 0;
            transform: rotate(90deg);
        }
    
        &.right-triangle {
            right: 0;
            transform: rotate(-90deg);
        }
    }
    &:hover .triangle {
        display: block;
    }
    
    .dots {
        width: inherit;
        position: absolute;
        bottom: 10px;
        text-align: center;
        .dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #87837e;
            margin-right: 10px;
            cursor: pointer;
        }
    }
}
複製代碼

相關標籤/搜索

每日一句

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