使用代码时，需要更改html代码中的图片路径，即可执行成功。
后面还有对js代码的详细说明，希望大家好好消化，好好理解。
1,html源代码：
2，css源代码：
javascript源代码：
window.onload = function ()
{
jzk.app.Tobanner();
}
var jzk = {};
jzk.tools = {};
jzk.tools.getStyle = function(obj,attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj,false)[attr];
}
}
jzk.ui = {};
jzk.ui.fadeIn = function(obj)
{
var iCur = jzk.tools.getStyle(obj,'opacity');
if(iCur==1)
{
return false;
}
var value = 0;
clearInterval(obj.finishtimer);
obj.finishtimer = setInterval(function() {
var ispeed = 5;
if(value == 100)
{
clearInterval(obj.finishtimer);
}
else
{
value = value +ispeed;
obj.style.opacity = value/100;
obj.style.filter = "alpha=('+value+')";
}
}, 30);
}
jzk.ui.fadeOut = function(obj)
{
var iCur = jzk.tools.getStyle(obj,'opacity');
if(iCur==0)
{
return false;
}
var value =100;
clearInterval(obj.finishtimer);
obj.finishtimer = setInterval(function() {
var ispeed = -5;
if(value == 0)
{
clearInterval(obj.finishtimer);
}
else
{
value = value +ispeed;
obj.style.opacity = value/100;
obj.style.filter = "alpha=('+value+')";
}
}, 30);
}
jzk.app = {};
jzk.app.Tobanner=function()
{
var ad = document.getElementById('ad');
var lists = ad.getElementsByTagName('li');
var iNow = 0;
var finishtimer = setInterval(showpic,4000);
function showpic ()
{
if(iNow == lists.length-1)
{
iNow = 0;
}
else
{
iNow ++;
}
for(var i=0;i<lists.length;i++)
{
jzk.ui.fadeOut(lists[i]);
}
jzk.ui.fadeIn(lists[iNow]);
}
}
对javascript源代码的几大点理解：
一.我采用分层的理念编写代码，思路清晰，对后期的管理和修改很有帮助：
1.var jzk ={}；定义民命空间；
2.jzk.tools = {}； 分层第一层，基本应用工具；
3.jzk.ui = {}； 分层第二层，一些广泛使用的函数包装；
jzk.app = {}； 分层第三层，直接用于页面调用的应用函数；
二.jzk.tools层上的函数：
jzk.tools.getStyle函数用于定义一个可以获取元素属性值得函数；
三.jzk.ui层上的函数：
1.jzk.ui.fadeIn函数功能：淡出函数（用来显示图片），在后面的jzk.app层中将会被调用；这段代码：
var iCur = jzk.tools.getStyle(obj,'opacity');
if(iCur==1)
{ return false;
}
这段代码是必不可少的，意思解释为：定义变量iCur存储元素的opacity属性值，判断如果为1，也就是完全可见的元素，则返回错误，不执行下面的代码；
2.jzk.ui.fadeOut函数功能：淡入函数（用来隐藏图片），同样是这样一段代码：
因为此处是用来隐藏图片，所以先定义变量iCur存储元素的opacity属性，判断如果为0，也就是完全不可见图片，所以就没必要再隐藏，所以返回错误；
四.jzk.app层上的函数：
jzk.app.Tobanner函数功能，就是用来页面调用的应用函数，定义一个当前变量，使当前图片显示，其他的图片隐藏，从而达到了淡入淡出的效果。
五.页面调用：
页面调用代码实现：
直接调用应用层的函数即可。