一、原生JS实现轮播

1. 自动换图 (设置定时器每隔2s换一张图)
2. 点击左右箭头换图
3. 点击小圆点换图

布局

<div id="fade">
    <img src="img/1.jpg" width="100%" height="100%" id="lunbo">
    <i class='iconfont icon-jiantouzuo now-left' id="left"></i>
    <i class='iconfont icon-jiantouyou now-right' id="right"></i>
    <ul class="ul_dian">
        <li class='iconfont icon-yuandianzhong '></li>
        <li class='iconfont icon-yuandianzhong '></li>
        <li class='iconfont icon-yuandianzhong '></li>
        <li class='iconfont icon-yuandianzhong'></li>
    </ul>
</div>
<script>
    var lb = document.getElementById("lunbo")
    var num = 1;
    setInterval(function() {
        num++;
        if(num ==5){
            num = 1;
        }
        lb.src = "img/" + num + ".jpg"
    },3000)
    var left = document.getElementById("left")
    var right = document.getElementById("right")
    left.onclick=function() {
        num--;
        if(num == 0) {
            num = 1;
        }
        lb.src = "img/" + num + ".jpg"
    }
    right.onclick = function() {
        num ++;
        if(num == 5) {
            num = 4
        }
        lb.src = "img/" + num +".jpg"
    }
    var allLi = document.getElementByTagName('ul')[0].getElementByTagName('li')
    for(var i = 0;i<allLi.length;i++){
        allLi[i].index = i;
        allLi[i].onclick= function(){
            var num=this.index+1;
            lb.src="img/"+num+".jpg"
        }
    }
</script>

二、Swiper轮播

<div class="div_inner">
    <div class="swiper-container" id="swiper-container1" style="width: 100%;" dir="rtl">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="img/1.jpg"></div>
            <div class="swiper-slide"><img src="img/2.jpg"></div>
            <div class="swiper-slide"><img src="img/3.jpg"></div>
            <div class="swiper-slide"><img src="img/4.jpg"></div>
            <div class="swiper-slide"><img src="img/5.jpg"></div>
        </div>
    </div>
</div>
var mySwiper1 = new Swiper('#swiper-container1', {
    loop : true, //环路，让Swiper看起来是循环的
    speed : 10000, //速度
    freeMode : true, //根据惯性滑动可能不止一格且不会贴合
    observer : true, //修改swiper自己或子元素时，自动初始化swiper
    autoplay : true, //自动切换
    autoplay : {
        delay : 0, //自动切换的时间间隔，单位ms
        disableOnInteraction : false //用户操作swiper之后，是否禁止autoplay
    },
    noSwiping : true, //设为true时，可以在slide上（或其他元素）增加类名'swiper-no-swiping'，使该slide无法拖动
    autoHeight : true, //自动高度
    spaceBetween : 3, //两个slide的间隔
    slidesPerView : 'auto', //设置slider容器能够同时显示的slides数量
    observeParents : true //当Swiper的父元素变化时Swiper更新。
});

三、3D轮播

css中主要用到的是transform-style属性来实现3d效果