js简易轮播图，二十行代码搞定

今天给大家写一款简易轮播图，这个轮播图的实现方式很简单，通过切换图片的src
就可以实现，话不多说开始干代码。
首先我们在html中插入一张图片给它取一个id名称，在这里我就叫它focusImg：

<img src="img/nr2.jpg" width="100%" height="100%"  id="focusImg"/>

图片插入好之后可以自己设置想要的css样式，这里就不为大家演示了，接下来是js的代码：

//首先获取图片的id名称
var focusImg = document.getElementById('focusImg');
//设置一个可以切换图片src的标识
var sign = 0;

创建一个showPic（index）函数，在这里面传入一个参数：

function showPic(index){
	
	//在这里要给你的图片的src设置成类似pic1.jpg  pic2.jpg这种形式 
	var imgSrc = 'img/nr';
	imgSrc = imgSrc + index + '.jpg';
	//这里特别备注一下，如果你的图片用的名称是class而不是id
	 //那么就不能使用focusImg.src这个方法，要使用focusImg.setAttribute('src'， imgSrc);方法
	focusImg.src = imgSrc;   //获取img的src地址
	
	//这一块如果不需要轮播图下面的导航样式的话可以不写
	var ulList = document.getElementById('ulList');
	var links = ulList.getElementsByTagName('a');
	
	
	for(var i = 0; i < links.length; i++){
		links[i].className = '';
		
	}
	links[index].className = 'current';  //放在循环里会导致有延迟
}

这是我的图片src设置的名称。

这样一个showPic函数就完成了，只有这一个函数是不行的，要让轮播图动起来那么就需要一个定时器setInterval（），还需要一个切换src数字的函数，在这里我给它取名为changePic（）：

function changePic(){
	//在这里调用showPic()函数
	showPic(sign);     //这两个顺序不能颠倒，顺序错误会出现什么样的情况大家自己可以试试
	sign++;
	if(sign == 5){
		sign = 0;      //当图片轮播到第六张的时候让他变成第一张图片
	}
	
}

window.onload = showPic(sign);

这行代码的意思是让浏览器加载的时候显示你设置的初始图片

//使用定时器循环这个轮播图
//也可以直接把changePic()写在定时器里面
setInterval('changePic()', 3000);

到这里一个简易的轮播图就完成了，如果想加上按钮点击切换轮播图的图片也很简单，在html中加上两个button按钮，一个左边一个右边移动到图片相应的位置，再给他们绑定上函数就可以：

//html中的代码
<button id="lBtn"> < </button>
<button id="rBtn"> > </button>

//css中的代码
#lBtn{
	position: absolute;
	width: 30px;
	height: 50px;
	background-color: grey;
	left: 345px;
	top: 420px;
	outline: none;
	border: 0px;
	opacity: 0.5;
}
#rBtn{
	position: absolute;
	width: 30px;
	height: 50px;
	background-color: gray;
	left: 1150px;
	top: 420px;
	outline: none;
	border: 0px;
	opacity: 0.5;
}

//js中的代码
function add(){
	
	showPic(sign);
	sign++;
	if(sign == 5){
		sign = 0;
	}
}
function noAdd(){
	
	if(sign == 0){
		sign = 5;
	}
	sign--;
	showPic(sign);
}

var lBtn = document.getElementById('lBtn');
var rBtn = document.getElementById('rBtn');

lBtn.onclick = noAdd;
rBtn.onclick = add;

两个按钮的效果如图所示：

到这里轮播图的所有教程就完结了，希望大家都可以学会吧。