延展閱讀： UTF-8 符號

添加圓點(diǎn)坐標(biāo)按鈕組

繼續(xù)在之前的代碼后面，為輪播容器加上圓點(diǎn)坐標(biāo)按鈕組（也就是輪播圖最下面的小圓點(diǎn)點(diǎn)），通過這些按鈕我們可以清楚的看到每張輪播圖片所在圖片組的位置，并且可以通過點(diǎn)擊按鈕，來快速切換到我們想要的位置。

到這里我們的HTML代碼就寫完了，大家現(xiàn)在可以在瀏覽器里預(yù)覽一下。

怎么樣？很不像話吧。

接下來，就讓我們開始用CSS來進(jìn)一步完善它吧！

重置CSS

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

margin, padding 默認(rèn)為0，將padding和border算入寬度

延展閱讀：box-sizing 屬性

為輪播容器設(shè)置樣式

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

為輪播頁面設(shè)置樣式

.slide {
  display: none;     /*默認(rèn)為不顯示*/
}

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

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

為"前翻"，"后翻" 按鈕設(shè)置樣式

/* 前進(jìn) & 后退 */
.prev, .next {
  cursor: pointer;
  position: absolute;    /*在輪播容器內(nèi)絕對定位*/
  top: 50%;              /*在垂直方向調(diào)到中間*/
  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;
}

/*當(dāng)鼠標(biāo)Hover時，背景色改變，提升用戶體驗(yàn)*/
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

為按鈕組添加樣式

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

.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;
}

現(xiàn)在在瀏覽器里打開再看一下。

是不是什么也看不到？

沒關(guān)系，我們馬上就要見證奇跡啦，接下來讓我完成最后的部分吧！

離開全局

(function() {
    
})();

把JS代碼放到一個多帶帶的自調(diào)用匿名函數(shù)中。

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

創(chuàng)建輪播對象

    var slideshow = {};       /*創(chuàng)建輪播對象*/
        
    slideshow.slides = document.getElementsByClassName("slide");   /*操作DOM獲得輪播頁面組*/
    slideshow.dots = document.getElementsByClassName("dot");       /*操作DOM獲得圓點(diǎn)按鈕組*/
    slideshow.prevBtn = document.getElementById("slideShowPrev");  /*操作DOM獲得前翻頁按鈕*/
    slideshow.nextBtn = document.getElementById("slideShowNext");  /*操作DOM獲得后翻頁按鈕*/

顯示目標(biāo)頁面

    /*顯示指定輪播頁面*/
    slideshow.showSlide = function(num) {  /*num 目標(biāo)頁面在頁面組中的位置*/
        var index,
            slides = this.slides,         
            dots = this.dots,
            slidesLength = slides.length,
            dotsLength = dots.length;
        
        /*num值在范圍內(nèi)輪環(huán)，以此來實(shí)現(xiàn)輪播*/
        if(num > slidesLength) {     /*當(dāng)超過最大值，num返回第一個*/
            num = 1;
        } else if(num < 1) {
            num = slidesLength;      /*當(dāng)超出最小值，num提升至第一個*/
        }
        
        /*關(guān)閉全部輪播頁面顯示*/
        for(index = 0; index < slidesLength; index++) {  
            slides[index].style.display = "none";
        }
        
        /*清除所有圓點(diǎn)按鈕的 ".active" */ 
        for(index = 0; index < dotsLength; index++) {
            dots[index].classList.remove("active");
        }
        
        /*使目標(biāo)頁面顯示，相對應(yīng)圓點(diǎn)按鈕添加 ".active" */
        /*因?yàn)閿?shù)組從0開始，所以此處 num-1 代表相對應(yīng)的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;            /*因?yàn)橄聵?biāo)從0開始，所有此處 + 1*/
                 break;                                   /*此時 currentSlideIndex 為函數(shù)調(diào)用時，輪播圖正在顯示的頁面的index*/
            }
        }
        
        this.showSlide(currentSlideIndex += num);         /*與num值相加，作為參數(shù)調(diào)用 showSlide()*/
    }

自動輪播

    /*自動輪播功能*/
    slideshow.automaticShow = function() {
        var index,
            currentSlideIndex,
            slides = this.slides,
            slidesLength = slides.length,
            that = this;
        
        /*循環(huán)執(zhí)行代碼，每隔三秒切換至下一張頁面*/
        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);
    }

添加事件監(jiān)聽

    /*添加事件監(jiān)聽*/
    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);
        
        /*點(diǎn)擊圓點(diǎn)按鈕，切換至對應(yīng)頁面*/
        for(index = 0; index < dotsLength; index++) {
            (function(index) {  /*閉包*/
                dots[index].addEventListener("click", function() {
                    that.showSlide(index + 1); /*index從0開始，所以 + 1*/
                }, false);
            })(index);  
        }
    }

擴(kuò)展閱讀: 淺談JavaScript for循環(huán) 閉包

初始化

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

調(diào)用

slideshow.init();

好啦，現(xiàn)在所有的代碼都寫完啦！

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

在這里，只是給大家提供一種思路，參考。
具體的實(shí)現(xiàn)，每個人都可以有不同的方法。
請大家趕快發(fā)揮想象，把你最想實(shí)現(xiàn)的功能，在電腦敲出來吧！

參考自w3cschools