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;

兩個按鈕的效果如圖所示：

到這裏輪播圖的所有教程就完結了，希望大家都可以學會吧。