我的First Blood。

学习javascript越来越吃力，以前需要实现什么功能，各种插件上，照着例子，直接复制粘贴，也不知道啥原理，现在后悔了，人总要为自己做过的一切买单，这么做是好事也是坏事，废话不多说，自己体会哈！

第一步 HTML

    
    
        
     
            
      
                
                   
      
            
      
                
                   
      
            
      
                
                   
      
            
      
                
                   
      
            
      ❮            
      ❯        
     
        
     
        
     
            
                  
                  
                  
              
     
    
    

心路历程

先搞个盒子，把这些幻灯片的图片装起来，还要有左右滑动箭头，还有啥，就是切换的点点接下来要搞样式了，想想我们一般刚打开一个幻灯片是什么样子，先写出来样式

第二布 写CSS

心路历程

表示首先要清除样式，然后开始。细说不来啊，中间加了个fadeIn过度下，显得不那么尴尬，那两个箭头用了绝对定位，垂直居中的一种top(calc)方法

第三步 写JS

var slideIndex = 1;    var slides = document.getElementsByClassName("slide");    var dots = document.getElementsByClassName("dot");    goSlide(1);    function prevSlide() {        goSlide(slideIndex - 1);    }    function nextSlide() {        goSlide(slideIndex + 1);    }    //switch to some slide    function goSlide(n) {        //考虑头尾        n = n == 0 ? slides.length : n;        n = n == (slides.length + 1) ? 1 : n;        //main        for (let i = 0; i < slides.length; i++) {            if (i == n - 1) {                slides[i].style.display = "block";            } else {                slides[i].style.display = "none";            }        }        for (let j = 0; j < dots.length; j++) {            if (j == n - 1) {                dots[j].className += dots[j].className.indexOf(" active") > 0 ? "" : " active";            } else {                dots[j].className = dots[j].className.replace(" active", "");            }        }        //赋值给index        slideIndex = n;    }

心路历程

首先我得解决，我想到哪一页就到哪一页，那我得知道当前页的页码slideIndex,所以我得先定义一下，初始为1，然后就可以写一个方法goSlide(n)去到哪一页的实现，接下来再考虑怎么去切换前一张和后一张，只要知道slideIndex那这个就很简单了，所以最后别忘了赋新的值给slideIndex

一个半调子程序员，基础很不扎实，第一次强迫自己写写文章，虽然很简单，相信自己跟着需求、逻辑走再难的路也能走通