原生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="http://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