轮播图

轮播图的实现形式

位置变化的轮播

步骤

1. 准备一个显示内容的盒子(溢出隐藏)，准备一个装内容的盒子(多个内容的 每个内容的大小就是其对应的显示盒子的大小)
2. 控制对应的装内容的盒子在显示内容的盒子内移动(每次移动的区间就是一个显示内容盒子的大小)
3. 实现无锋主要是通过将第一张图放在最后(当你从最后一张切换到添加的这个第一张时 直接更改当前的位置为第一张的位置

透明度切换的轮播

1. 将所有的图片都定位在一个位置（初始值全部为透明 只有第一张不透明）
2. 切换其透明度（将上一个透明度为0 当前为1）

图片变化的轮播

主要切换对应的图片路径

带焦点的轮播（进阶版）

第三方插件

swiper 官网www.swiper.com.cn/

swiper是一个用于制作轮播图的插件（包含对应的js以及css）
var swiper = new Swiper('.swiper-container', { //当前需要轮播的盒子
pagination: '.swiper-pagination', //指定显示点的盒子
nextButton: '.swiper-button-next', //显示的下一个按钮
prevButton: '.swiper-button-prev', //显示的上一个按钮
paginationClickable: true, //允许焦点点击
spaceBetween: 30,//间距
centeredSlides: true, //是否居中
autoplay: 2500,//自动播放 2500表示2.5自动切换
autoplayDisableOnInteraction: false
});