最近學習javascript實現動畫效果，就用原生的javascript程式碼實現了圖片輪播的效果，供大家參考學習。

1.首先設定圖片輪播的地方（id=banner）

2.然後是一個圖片組

3.然後是一個按鈕層，用來定點陣圖片組( ul-->li)

4.最後為按鈕層設定背景以及顯示圖片的alt資訊

可以先構造出html結構

<span style="font-family:SimSun;"><div id="main">
	
	<div id="banner">
		<img src="images/T_1.png"alt="第一張圖" />
		<img src="images/T_2.png"alt="第二張圖" />
		<img src="images/T_3.png"alt="第三張圖" />
		<img src="images/T_4.png"alt="第四張圖" />
		<img src="images/T_5.png"alt="第五張圖" />
		<img src="images/T_6.png"alt="第六張圖" />
		<ul>
			<li>●</li>
			<li>●</li>
			<li>●</li>
			<li>●</li>
			<li>●</li>
			<li>●</li>
		</ul>
		<span> </span>
		<strong> </strong>
	</div>
</div></span>
 

至於CSS樣式，附件原始碼中已給出。接著介紹封裝的函式，直接看原始碼

//獲取某組節點的數量
Base.prototype.length = function () {
	return this.elements.length;
};

//獲取某一個節點的屬性   ******
Base.prototype.attr = function (attr) {
	return this.elements[0][attr];
};

//獲取某一個節點在整個節點組中是第幾個索引  ******
Base.prototype.index = function () {
	var children = this.elements[0].parentNode.children;
	for (var i = 0; i < children.length; i ++) {
		if (this.elements[0] == children[i]) return i;
	}
};

//獲取某一個節點，並且Base物件  *******
Base.prototype.eq = function (num) {
	var element = this.elements[num];
	this.elements = [];
	this.elements[0] = element;
	return this;
};



//設定CSS
Base.prototype.css = function (attr, value) {
	for (var i = 0; i < this.elements.length; i ++) {
		if (arguments.length == 1) {
			return getStyle(this.elements[i], attr);
		}
		this.elements[i].style[attr] = value;
	}
	return this;
};

//設定innerHTML
Base.prototype.html = function (str) {
	for (var i = 0; i < this.elements.length; i ++) {
		if (arguments.length == 0) {
			return this.elements[i].innerHTML;
		}
		this.elements[i].innerHTML = str;
	}
	return this;
};



//設定滑鼠移入移出方法   ******
Base.prototype.hover = function (over, out) {
	for (var i = 0; i < this.elements.length; i ++) {
		addEvent(this.elements[i], 'mouseover', over);
		addEvent(this.elements[i], 'mouseout', out);
	}
	return this;
};



//設定顯示
Base.prototype.show = function () {
	for (var i = 0; i < this.elements.length; i ++) {
		this.elements[i].style.display = 'block';
	}
	return this;
};

//設定隱藏
Base.prototype.hide = function () {
	for (var i = 0; i < this.elements.length; i ++) {
		this.elements[i].style.display = 'none';
	}
	return this;
};
 

$(function () {
	//輪播器初始化
	$('banner img').css('display','none');
	//alert();
	$('#banner img').eq(0).css('display', 'block');
	$('#banner ul li').eq(0).css('color', '#333');
	//$('#banner strong').html('asfsdc');
	$('#banner strong').html($('#banner img').eq(0).attr('alt'));  //獲取alt的屬性值
	
	//輪播器計數器
	var banner_index = 1;
	//自動輪播
	var banner_timer = setInterval(banner_fn,1000);
	
	//手動輪播器
	$('banner ul li').hover(function () {
	//var num = $(this).index();
	 // alert(num);
	    clearInterval(banner_timer);    //清理計時器，停止播放
	   //	alert($(this).css('color'));
	  	banner(this);
		
	},function () {
	  banner_index = $(this).index() + 1;
	  banner_timer = setInterval(banner_fn,1000);
	});
	
		
	function banner(obj) {
		$('#banner img').css('display', 'none');
		$('#banner img').eq($(obj).index()).css('display', 'block');
		$('#banner ul li').css('color', '#999');
		$(obj).css('color', '#333');
		$('#banner strong').html($('#banner img').eq($(obj).index()).attr('alt'));
	}
	
	function banner_fn() {
		if (banner_index >= $('#banner ul li').length()) banner_index = 0;
		banner($('#banner ul li').eq(banner_index).first());   //傳遞本體
		banner_index++;
	}
});
上張效果圖<img src="https://img-blog.csdn.net/20160610121559382?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

 總結;目前實現了自動輪播和手動暫停的功能，接下來的想法是設定滾動動畫功能，並可以計入上下輪播選擇，持續更新中.....
原始碼地址：http://pan.baidu.com/s/1eSg8rr8