轮播图学习总结之一(有源码)

最近在做一个自己练手的项目时，用到了轮播图，然后自己憋了一个小时，写成了向右滑动的动画效果，于是上网看了一下教程，因为教程也讲了其他东西，所以一直没有快进，花了一个小时，下来自己直接撸码花了三个小时。下面看一下初步成果吧。

实现功能与介绍

实现功能：

• 图片定时切换
• 小圆点随图片切换，样式改变；可通过点击小圆点控制显示第几张图
• 左右切换按钮在鼠标移入图片区域之后显示，可通过点击按钮控制显示上一张或者下一张图

实现介绍

• 肯定说的不是很好，但是还是要尽量总结一下：
  • 肯定是先有一个大盒子，给盒子设置宽高，然后让盒子居中显示；
  • 然后里边再给放图片的小盒子，小盒子也一定要设置宽高，图片要显示多大就设置多少；
  • 我们给放每张图片的小盒子设置绝对定位 position: absolute,使其脱离文档流，悬浮于元素之上;
  • 现在图片都是叠在一起的，页面只显示一张图片，然后通过设置每个图片盒子的z-index，使图片在所有图片最上边显示；
  • js实现部分：通过js给改变元素的class，class样式写在css中，图片盒子为.show ,改变图片盒子的z-index，小圆点为.active，设置原定被选中的样式；
    

*总结与分析

1、总结

• 相对定位 position:relative

  设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

  • 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
    如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动

    #box_relative {
        position: relative;
        left: 30px;
        top: 20px;
    }
    

• 绝对定位 position: absolute

  设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

  • 绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
    

  • 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

    注释：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。
    提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

  #box_absolute {
      position: absolute;
      left: 30px;
      top: 20px;
  }
  

• relative定位与absolute定位的区别

  • relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。
    
  • absolute：定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。

• 设置元素透明

  • 相同点：rgba()和opacity都能实现透明效果；
  • 不同点：opacity作用于元素，以及元素中所有的内容；
    rgba()只用于于元素的颜色，及背景色；

    *根据自己使用实际情况说明：如果是整个元素的透明度（包含元素内容）使用 opacity，如果设置背景色透明度，使用rgba。
  

2、程序分析

• 图往右切换时有点卡，可能和定时器有关，试了下清除和重启定时器也不太顶用，希望大佬能指导下
• 切图效果略显生硬，没有淡入淡出、图片左右移动的效果，这个会在下篇文章之前学习实现

切图效果已实现
设置图片左移位置，然后显示时的左移位置，再加上过过渡效果，就实现了，源码为完整源码；

源码

//html

    
    
    
    


    

        

            

            

            

            

            

            

                <
                >
            
            

                
                
                
                
                
            
        
    
    

// style.css

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: aquamarine;
    box-sizing: border-box;
}

.banner-contain {
    height: 350px;
    width: 1000px;
    margin: auto;
    position: relative; 
    top: 30px;
}
.banner-contain ul {
    list-style: none;
}
.banner-contain li {
    width: 1000px;
    height: 350px;
    opacity: 0;
    position: absolute;
    left: 1000px;
}


.banner-contain img{
    height: 350px;
    width: 1000px;  
}

ul .show {
    z-index: 4;
    opacity: 1;
    left: 0px;
    transition: 0.6s;
}

.button {
    display: flex;
    z-index: 5;
    position: absolute;
    justify-content: space-between;
    right: 60px;
    bottom: 45px;;
}

.button span{
    cursor: pointer;
    width: 10px;
    height: 10px;
    margin: 0px 4px;
    border-radius: 50%;
    background-color:aliceblue, .4;
    border: 2px #404040 solid;
}

.button span.active {
    background-color:  #404040; 
}

.btn{
    position: absolute;
    top: 40%;
    display: flex;
    left: 15px;
    width: 970px;
    align-items: center;
    justify-content: space-between;
}
.btn button {
    width: 50px;
    height: 50px;
    border: none;
    color: orange;
    cursor: pointer;
    line-height: 50px;
    background-color: rgba(255,255,255,0.4);
    opacity: 0;
    border-radius: 50%;
    outline: none;
    font-size: 35px;
    z-index: 9;
}

ul:hover button {
    transition: 0.8s;
    opacity: 1;
}

//js

let spans = document.getElementsByTagName("span");
let lis = document.getElementsByTagName("li");
let btns = document.getElementsByTagName("button");
let sIndex = 0;
var aaa = setInterval(function() {
    goIndex (sIndex);
    sIndex++;
},3000);
// goIndex(sIndex);

function goIndex (index) {
    sIndex=index;
    if (index >= spans.length) {
        sIndex = index = 0;
    } else if (index < 0) {
        sIndex = index = spans.length-1;
    }
    var iii = spans.length - sIndex-1;
    for (var i=0;i