适合【前端入门者】的原生JS轮播图实现

学前端已经一年多了，在JavaScript方面，学会了基本语法，页面操作之后，慢慢走向了框架这条不归路，框架用起来真的是省时省力，效果好、代码少、还节省时间。

在前几天去做一个页面的时候，要求只能是用以前版本的框架，我就去找框架之前的版本，可是在某些官网上老版本的框架已经不存在了，就我这暴脾气，还是用原生的JS去写吧，不是不知道，一试还真的能吓一跳，做到轮播图的时候，感觉自己不会了，索性就去把内容回顾了一遍。

从根本去学习的，所以非常适合初学者的第一次学做轮播，大神们口下留情。

现在把这个轮播图分享给大家。

Html布局

    首先父容器container存放所有内容，子容器list存在图片。子容器buttons存放按钮小圆点。

<div id="container">
        <div id="list">
            <img src="img/3.jpg" alt="1" />
            <img src="img/1.jpg" alt="1" />
            <img src="img/2.jpg" alt="2" />
            <img src="img/3.jpg" alt="3" />
            <img src="img/1.jpg" alt="3" />
        </div>
        <div id="buttons">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
        </div>
        <a href="javascript:;" id="prev" class="arrow">&lt;</a>
        <a href="javascript:;" id="next" class="arrow">&gt;</a>
    </div>

在做的时候会出现一些问题就是各个图片之间会出现缝隙，可以自己去查一下解决方法，我就不具体说了，我只说我的处理方法：就是将个图片代码之间的空格删去，如下

<img src="img/3.jpg" alt="1" /><img src="img/1.jpg" alt="1" /><img src="img/2.jpg" alt="2" /><img src="img/3.jpg" alt="3" /><img src="img/1.jpg" alt="3" />

css修饰

css修饰我就不写了，不会css的一般不会去了解轮播图的，hahaha~~~~~~~

JS

var list = document.getElementById('list');
	var prev = document.getElementById('prev');
	var next = document.getElementById('next');
	var Broadcast = document.getElementById("container");
	var Rwidtn = Broadcast.offsetWidth;
	function animate(distance) {
		var newLeft = list.offsetLeft + distance;
		list.style.left = newLeft + 'px';
		if(newLeft<-3*Rwidtn){
			setTimeout(function(){
				list.style.transition="0s";
				list.style.left = - Rwidtn + 'px';
				setTimeout(function(){
					list.style.transition="1.5s";
				},100);
			},1500);
			
		 }
		 if(newLeft>-Rwidtn){
		 	setTimeout(function(){
		 		list.style.transition="0s";
		 		list.style.left = - 3*Rwidtn + 'px';
		 		setTimeout(function(){
					list.style.transition="1.5s";
				},100);
		 	},1500);
		 }
	}
	prev.onclick = function() {
		animate(Rwidtn);
	}
	next.onclick = function() {
		animate(-Rwidtn);
	}
	var timer;
	function play() {
	    timer = setInterval(function () {
	        next.onclick()
	    }, 4000)
	}
	play();
    function stop() {
        clearInterval(timer);
    }
    Broadcast.onmouseover = stop;
    Broadcast.onmouseout = play;

这些是全部js代码，下面我经详细的介绍每一块的作用。

首先就是  var Rwidtn = Broadcast.offsetWidth; 因为我的是铺满的轮播，我获取了宽度，也可以直接使用定值

 接下来是函数

function animate(distance) {
		var newLeft = list.offsetLeft + distance;
		list.style.left = newLeft + 'px';
		if(newLeft<-3*Rwidtn){
			setTimeout(function(){
				list.style.left = - Rwidtn + 'px';
			},1500);
			
		 }
		 if(newLeft>-Rwidtn){
		 	setTimeout(function(){
		 		list.style.left = - 3*Rwidtn + 'px';
		 	},1500);
		 }
	}

将上一页、下一页通过函数的方式去写，这是一个好的编码习惯，同样方便代码的管理，以及运行

接下来是让他自己动起来，同样去使用函数

var timer;
	function play() {
	    timer = setInterval(function () {
	        next.onclick()
	    }, 4000)
	}
	play();

最后就是当用户想要去看某张图片的时候的暂停效果

 function stop() {
        clearInterval(timer);
    }
    Broadcast.onmouseover = stop;
    Broadcast.onmouseout = play;

这样一个简单的轮播图就基本上实现了，其他的就不去详细地介绍了。