前端實例練習 - 輪播圖

時間 2019-12-13

標籤前端實例練習简体版

原文原文鏈接

輪播圖

初衷：不少人在初學前端的時候都會問，「如何入門前端？」
同爲在前端學習道路上，奮力追趕的一員，本人對於目前網絡上所能看到的「入門級」的教材並不太滿意。學習一門新知識，實例是尤爲重要的。在這裏本人整理了目前頁面上常見功能實現的具體實例。願能爲你們提供一些幫助。
但願可以與你們互相分享，共同進步。html

效果預覽
前端

HTML部分

建立輪播圖容器git

<div class="slideshow-container"></div>

添加多個輪播頁面github

<div class="slideshow-container"> <!-- 輪播容器開始 -->
        
        <!-- 輪播頁面 -->
        <div class="slide"> 
            <div class="slideIndex"></div> <!-- 展現頁碼 -->
            <img src="img1.jpg">           <!-- 輪播圖片 -->
        </div>
        
        <!-- 輪播頁面 -->
        <div class="slide">
            <div class="slideIndex"></div> <!-- 展現頁碼 -->
            <img src="img2.jpg">           <!-- 輪播圖片 -->
        </div>
        
        <!-- 輪播頁面 -->
        <div class="slide">
            <div class="slideIndex"></div> <!-- 展現頁碼 -->
            <img src="img3.jpg">           <!-- 輪播圖片 -->
        </div>
    </div> <!-- 輪播容器結束 -->

<div class="slideIndex"></div> 將來用來顯示輪播頁所在頁碼位置web
<img src="img.jpg"> 爲輪播頁面加上輪播圖片數組

添加 [前翻] [後翻] 按鈕瀏覽器

<!-- 前翻頁，後翻頁按鈕 -->
        <a class="prev" id="slideShowPrev">&#10094;</a> 
        <!-- &#10094 爲特殊Unicode字符 -->
        <a class="next" id="slideShowNext">&#10095;</a>  
        <!-- &#10095 爲特殊Unicode字符 -->

在輪播容器裏面，咱們在輪播頁面以後再爲容器加上「前翻」和「後翻」按鈕。
經過這兩個按鍵咱們能夠控制輪播頁面向前翻，或者向後翻。
此處在<a>標籤裏面是 UTF-8 字符，咱們能夠用這些字符來表示不少特殊符號。網絡

延展閱讀： UTF-8 符號閉包

添加圓點座標按鈕組

<!-- 圓點座標按鈕組 -->
    <div class="dotGroup">
        <span class="dot"></span> 
        <span class="dot"></span> 
        <span class="dot"></span> 
    </div>

繼續在以前的代碼後面，爲輪播容器加上圓點座標按鈕組（也就是輪播圖最下面的小圓點點），經過這些按鈕咱們能夠清楚的看到每張輪播圖片所在圖片組的位置，而且能夠經過點擊按鈕，來快速切換到咱們想要的位置。

到這裏咱們的HTML代碼就寫完了，你們如今能夠在瀏覽器裏預覽一下。

怎麼樣？很不像話吧。

接下來，就讓咱們開始用CSS來進一步完善它吧！

CSS 部分

重置CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

margin, padding 默認爲0，將padding和border算入寬度

延展閱讀：box-sizing 屬性

爲輪播容器設置樣式

/* 輪播圖容器 */
.slideshow-container {
  max-width: 800px;
  position: relative;       /*設置爲相對定位，以讓子元素相對它進行絕對定位*/
  margin: 0 auto;           /*居中*/
}

爲輪播頁面設置樣式

.slide {
  display: none;     /*默認爲不顯示*/
}

.slide img {
    width: 100%;     /*寬度最大不超過父元素（輪播容器）*/
}

.slideIndex {        /*設置頁標樣式*/
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

爲"前翻"，"後翻" 按鈕設置樣式

/* 前進 & 後退 */
.prev, .next {
  cursor: pointer;
  position: absolute;    /*在輪播容器內絕對定位*/
  top: 50%;              /*在垂直方向調到中間*/
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease; /*加入動畫特效*/
}

.prev {
    left: 0;   
    border-radius: 0 3px 3px 0;
}


.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/*當鼠標Hover時，背景色改變，提高用戶體驗*/
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

爲按鈕組添加樣式

.dotGroup {
    text-align: center;      /*使按鈕組居中*/
    position: relative;      /*使其脫離文檔流，不會被圖片擋住*/
    margin-top: -30px;       /*向上移，使其出如今在圖片底端位置*/
}

.dot {                   
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover { 
  background-color: #717171;
}

如今在瀏覽器裏打開再看一下。

是否是什麼也看不到？

不要緊，咱們立刻就要見證奇蹟啦，接下來讓我完成最後的部分吧！

Javascript 部分

離開全局

(function() {
    
})();

把JS代碼放到一個單獨的自調用匿名函數中。

擴展閱讀：[深刻理解(function() {
})();](http://www.jb51.net/article/5...

建立輪播對象

var slideshow = {};       /*建立輪播對象*/
        
    slideshow.slides = document.getElementsByClassName("slide");   /*操做DOM得到輪播頁面組*/
    slideshow.dots = document.getElementsByClassName("dot");       /*操做DOM得到圓點按鈕組*/
    slideshow.prevBtn = document.getElementById("slideShowPrev");  /*操做DOM得到前翻頁按鈕*/
    slideshow.nextBtn = document.getElementById("slideShowNext");  /*操做DOM得到後翻頁按鈕*/

顯示目標頁面

/*顯示指定輪播頁面*/
    slideshow.showSlide = function(num) {  /*num 目標頁面在頁面組中的位置*/
        var index,
            slides = this.slides,         
            dots = this.dots,
            slidesLength = slides.length,
            dotsLength = dots.length;
        
        /*num值在範圍內輪環，以此來實現輪播*/
        if(num > slidesLength) {     /*當超過最大值，num返回第一個*/
            num = 1;
        } else if(num < 1) {
            num = slidesLength;      /*當超出最小值，num提高至第一個*/
        }
        
        /*關閉所有輪播頁面顯示*/
        for(index = 0; index < slidesLength; index++) {  
            slides[index].style.display = "none";
        }
        
        /*清除全部圓點按鈕的 ".active" */ 
        for(index = 0; index < dotsLength; index++) {
            dots[index].classList.remove("active");
        }
        
        /*使目標頁面顯示，相對應圓點按鈕添加 ".active" */
        /*由於數組從0開始，因此此處 num-1 表明相對應的index*/
        slides[num - 1].style.display = "block"; 
        dots[num - 1].classList.add("active");
    }

爲前翻，後翻按鈕添加功能

/*經過前翻，後翻按鈕切換頁面  
    (num = 1:前翻)(num = -1:後翻)*/
    slideshow.changeSlide = function(num) {
        var index,
            currentSlideIndex,
            slides = this.slides,
            slidesLength = slides.length;

        for(index = 0; index < slides.length; index++) {
            if(slides[index].style.display == "block") {  /*檢測到正在顯示的頁面的index*/
                currentSlideIndex = index + 1;            /*由於下標從0開始，全部此處 + 1*/
                 break;                                   /*此時 currentSlideIndex 爲函數調用時，輪播圖正在顯示的頁面的index*/
            }
        }
        
        this.showSlide(currentSlideIndex += num);         /*與num值相加，做爲參數調用 showSlide()*/
    }

自動輪播

/*自動輪播功能*/
    slideshow.automaticShow = function() {
        var index,
            currentSlideIndex,
            slides = this.slides,
            slidesLength = slides.length,
            that = this;
        
        /*循環執行代碼，每隔三秒切換至下一張頁面*/
        var autoLoop = setInterval(function() {              
            for(index = 0; index < slidesLength; index++) {
                if(slides[index].style.display == "block") { /*得到正在顯示的頁面的index*/
                    currentSlideIndex = index + 1;
                    break;
                }
            }
            that.showSlide(currentSlideIndex + 1);
        }, 3000);
    }

添加事件監聽

/*添加事件監聽*/
    slideshow.addHandler = function() {
        var index,
            prevBtn = this.prevBtn,
            nextBtn = this.nextBtn,
            dots = this.dots,
            dotsLength = dots.length,
            that = this;      /*此處that爲slideshow對象*/

        prevBtn.addEventListener('click', function() {
            that.changeSlide(-1); /*做用域改變，this再也不指slideshow對象*/
        }, false);
    
        nextBtn.addEventListener('click', function() {
            that.changeSlide(1);
        }, false);
        
        /*點擊圓點按鈕，切換至對應頁面*/
        for(index = 0; index < dotsLength; index++) {
            (function(index) {  /*閉包*/
                dots[index].addEventListener('click', function() {
                    that.showSlide(index + 1); /*index從0開始，因此 + 1*/
                }, false);
            })(index);  
        }
    }

擴展閱讀: 淺談JavaScript for循環閉包

初始化

/*初始化*/
    slideshow.init = function() {
        this.showSlide(1);    /*初始默認頁面*/
        this.automaticShow();
        this.addHandler();
    }

調用

slideshow.init();

好啦，如今全部的代碼都寫完啦！

趕快打開瀏覽器，看看效果吧！

在這裏，只是給你們提供一種思路，參考。
具體的實現，每一個人均可以有不一樣的方法。
請你們趕快發揮想象，把你最想實現的功能，在電腦敲出來吧！

相關標籤/搜索

每日一句

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