延展閱讀： UTF-8 符號

添加圓點坐標按鈕組

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

到這里我們的HTML代碼就寫完了，大家現在可以在瀏覽器里預覽一下。

怎么樣？很不像話吧。

接下來，就讓我們開始用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;
}

現在在瀏覽器里打開再看一下。

是不是什么也看不到？

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

離開全局

(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();

好啦，現在所有的代碼都寫完啦！

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

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

參考自w3cschools