所谓独创的能力，就是经过深思的模仿。
网上的一些幻灯图片切换效果要么不能渐隐实现要么就是代码过于繁琐，下面这个代码简洁，适于随时调用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery渐变/淡入淡出焦点幻灯图代码</title>
<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
<style type="text/css">
ul, li
{
list-style-image:none;
list-style-type:none;
}
img{border: 0px;}
#myFlashMod {
position: relative;
width:960px;
height:300px;
overflow:hidden;
}
#myFlashMod ul li{
position: absolute;
left:0px;
top:0px;
width:960px;
height:300px;
}
#myFlashDots{
position: absolute;
bottom:0px;
width:960px;
height:30px;
line-height:30px;
color: #FFF;
text-align: center;
background:rgba(0, 0, 0, 0.5) none repeat scroll 0 0 !important;/*兼容Chrome*/
filter:alpha(opacity=50);
background:#000; /* 实现IE背景透明 */
}
#myFlashDots #span_Text{
position: absolute;
left:10px;
}
#myFlashDots #span_dots{
position: absolute;
right:10px;
display: block;
width:200px;
height:30px;
/*background: #FF0;
background: url(dots.png) no-repeat 0px -16px;*/
}
#myFlashDots #span_dots a{
margin-right:4px;
cursor: pointer;
float: left;
display: block;
width:16px;
height:16px;
background: url(dots.png) no-repeat 0px 0px;
}
#myFlashDots #span_dots a.on{
float: left;
display: block;
width:16px;
height:16px;
background: url(dots.png) no-repeat 0px -16px;
}
</style>
</head>
<body>
<div id="myFlashMod">
<ul>
<li><a href="#1" target="_blank" title="dbmng1" ><img src="images/1.jpg" width="960" height="300"/></a></li>
<li><a href="#2" target="_blank" title="dbmng2" ><img src="images/2.jpg" width="960" height="300"/></a></li>
<li><a href="#3" target="_blank" title="dbmng3" ><img src="images/3.jpg" width="960" height="300"/></a></li>
<li><a href="#4" target="_blank" title="dbmng4" ><img src="images/4.jpg" width="960" height="300"/></a></li>
<li><a href="#5" target="_blank" title="dbmng" ><img src="images/5.jpg" width="960" height="300"/></a></li>
</ul>
<div id="myFlashDots"><span id="span_Text">测试标题语句</span><span id="span_dots"></span></div>
</div>
<script type="text/javascript">
var FlashImgCount=0;//幻灯图片总数
var FlashCurrentIndex=0;//当前图片索引:从0开始
var FlashLI = $("#myFlashMod ul li");
$(FlashLI).each(function(){
FlashImgCount++;
//$(this).css("z-index",""+(FlashImgCount++));
$("#span_dots").html($("#span_dots").html()+"<a title='点击查看'></a>");//自动生成点击按钮
});//逐个赋值z-index
FlashCurrentIndex=0;
$("#span_dots a:eq("+(FlashCurrentIndex)+")").addClass("on"); //设置第一个a为选中状态
$("#myFlashMod ul li:gt("+(FlashCurrentIndex)+")").fadeOut(); //初始化:大于0的索引的图片都隐藏
FlashCurrentIndex=(FlashCurrentIndex+1)%FlashImgCount;
function EvChangeOp()
{
if(FlashCurrentIndex==0)
{
$("#myFlashMod ul li:eq("+(FlashImgCount-1)+")").fadeIn();
$("#myFlashMod ul li:eq("+(FlashImgCount-1)+")").fadeOut(2000);
$("#myFlashMod ul li:gt("+(FlashCurrentIndex)+")").fadeOut();
$("#myFlashMod ul li:eq("+(FlashCurrentIndex)+")").fadeIn(2000);
}
else{
$("#myFlashMod ul li:gt("+(FlashCurrentIndex)+")").fadeOut();
$("#myFlashMod ul li:eq("+(FlashCurrentIndex)+")").fadeIn(2000);
}
$("#span_dots a").removeClass("on");
$("#span_dots a:eq("+(FlashCurrentIndex)+")").addClass("on");
FlashCurrentIndex=(FlashCurrentIndex+1)%FlashImgCount;
}
var myFlashTimer=setInterval("EvChangeOp()",3000);
$("#span_dots a").click(function(){
clearInterval(myFlashTimer);
FlashCurrentIndex=$(this).index();
$("#span_dots a").removeClass("on");
$("#span_dots a:eq("+(FlashCurrentIndex)+")").addClass("on");
$("#myFlashMod ul li:gt("+(FlashCurrentIndex)+")").stop().fadeOut();
$("#myFlashMod ul li:eq("+(FlashCurrentIndex)+")").stop().fadeIn(2000);
FlashCurrentIndex=(FlashCurrentIndex+1)%FlashImgCount;
myFlashTimer=setInterval("EvChangeOp()",3000);
});
</script>
</body>
</html>
