JQuery实现的简洁Flash幻灯渐变效果

最新推荐文章于 2025-06-23 14:13:44 发布

转载最新推荐文章于 2025-06-23 14:13:44 发布 · 982 阅读

<!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="维度端前端网1" ><img src="images/1.jpg" width="960" height="300"/></a></li>
<li><a href="#2" target="_blank" title="维度端前端网2" ><img src="images/2.jpg" width="960" height="300"/></a></li>
<li><a href="#3" target="_blank" title="维度端前端网3" ><img src="images/3.jpg" width="960" height="300"/></a></li>
<li><a href="#4" target="_blank" title="维度端前端网4" ><img src="images/4.jpg" width="960" height="300"/></a></li>
<li><a href="#5" target="_blank" title="维度端前端网5" ><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 SortH2L=true;//从高到低渐隐；
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;
//$("#st").html("FlashCurrentIndex="+FlashCurrentIndex);
$("#span_dots a:eq("+(FlashCurrentIndex)+")").addClass("on"); //设置第一个a为选中状态
$("#myFlashMod ul li:gt("+(FlashCurrentIndex)+")").fadeOut(); //初始化
FlashCurrentIndex=(FlashCurrentIndex+1)%FlashImgCount;

function EvChangeOp()
{
$("#st").html("FlashCurrentIndex="+FlashCurrentIndex);
$("#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 t=setInterval("EvChangeOp()",3000);
$("#span_dots a").click(function(){
clearInterval(t);
FlashCurrentIndex=$(this).index();
$("#span_dots a").removeClass("on");
$("#span_dots a:eq("+(FlashCurrentIndex)+")").addClass("on");
$("#myFlashMod ul li:gt("+(FlashCurrentIndex)+")").fadeOut();
$("#myFlashMod ul li:eq("+(FlashCurrentIndex)+")").fadeIn(2000);
FlashCurrentIndex=(FlashCurrentIndex+1)%FlashImgCount;
t=setInterval("EvChangeOp()",5000);
});
</script>
<span id="st">-</span>
</body>

</html>

转自：http://www.dbmng.com/Article_664.html