前端实例练习 - 轮播图

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

好啦，如今全部的代码都写完啦！

赶快打开浏览器，看看效果吧！

在这里，只是给你们提供一种思路，参考。
具体的实现，每一个人均可以有不一样的方法。
请你们赶快发挥想象，把你最想实现的功能，在电脑敲出来吧！

参考自w3cschools