轮播图

无缝衔接的原理:头尾都加一张图，是分别是最后的和最开始的图，然后点到他们的时候方便更换

<style type="text/css">
	.wrap {
		width: 500px;
		height: 280px;
		border: 10px blue solid;
		margin: 50px auto;
		position: relative;
		overflow: hidden;
	}

	.box {
		height: 280px;
		width: 3500px;
		position: absolute;
		left: -500px;
	}

	.item {
		width: 500px;
		height: 280px;
		float: left;
	}

	.item {
		width: 500px;
		height: 280px;
		float: left;
		font-size: 100px;
		color: white;
		text-align: center;
		line-height: 280px;
	}

	.item1 {
		background-color: red;
	}

	.item2 {
		background-color: yellow;
	}

	.item3 {
		background-color: blue;
	}

	.item4 {
		background-color: green;
	}

	.item5 {
		background-color: lightpink;
	}

	.pre,
	.next {
		position: absolute;
		top: 110px;
		width: 30px;
		height: 50px;
		background-color: black;
		color: white;
		text-align: center;
		line-height: 50px;
	}

	.next {
		left: 470px;
	}

	.dian {
		width: 100px;
		height: 30px;
		border: 3px solid black;
		position: absolute;
		bottom: 10px;
		left: 40%;
	}

	.btn {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: white;
		float: left;
		margin: 5px;
	}
</style>
<div class="wrap">
	<div class="box">
		<div class="item item5">5-1</div>
		<div class="item item1">1</div>
		<div class="item item2">2</div>
		<div class="item item3">3</div>
		<div class="item item4">4</div>
		<div class="item item5">5</div>
		<div class="item item1">1-1</div>
	</div>
	<div class="pre" onclick="pre()">《</div>
	<div class="next" onclick="next()">》</div>
	<div class="dian">
		<span class="btn"></span>
		<span class="btn"></span>
		<span class="btn"></span>
		<span class="btn"></span>
		<span class="btn"></span>
	</div>
</div>
<script type="text/javascript">
	// 下标要从1开始,以为播放的第一张图前面有一张最后那张图，下标要注意对应
   var box = document.getElementsByClassName("box")[0];
    var btn = document.getElementsByClassName("btn");
    var index = 1;
    var moveTimer;
// 点击下一张
    function next(){
        index++;
        if(index == 7){
            index = 2;
            box.style.left = "-500px";
        }
        moveWidthIndex();
        btnCol();
    }
// 点击上一张
    function pre(){
        index--;
		console.log(index)
        if(index == 0){
            index = 5;
            box.style.left = "-2500px";
        }
        moveWidthIndex();
		btnCol();
    }
// 具体移动的函数
    function moveWidthIndex(){
        var l = index * -500 - box.offsetLeft;
        var count = 0;
        clearInterval(moveTimer);
        moveTimer = setInterval(function(){
            count++;
            box.style.left = box.offsetLeft + l/10 + "px";
            if(count >= 10){
                clearInterval(moveTimer);
                box.style.left = index * -500 + "px";
            }       
        },50);
    }
   
    for(var i = 0; i < btn.length; i++){
        btn[i].index = i; 
        btn[i].onclick = function(){
            index = this.index + 1;
            console.log(index);
            moveWidthIndex();
            btnCol();
           
           
        }
    }
    // 点击圆点按钮的函数
    function btnCol(){
        for(var i = 0 ; i < btn.length ; i++){
                btn[i].style.backgroundColor = "white";
            }
        if(index == 6){
            index = 1;
        }
		
       
    }
</script>

css实现轮播图

借助scroll-snap属性实现，不过兼容性不是很好

  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  @include e(container) {
    flex-direction: column;
    flex-shrink: 0;
    @include dimensions(160px, 110px);
    scroll-snap-align: center;
  }

实际应用的轮播图

移动端的swiperd，大部分ui库都配套有轮播图