原生javascript实现图片轮播效果

         最近学习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;
};

原生的javascript实现图片轮播完整代码，有部分注释，其中有些注释的部分是自己的调试过程。

$(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