jQuery实现企业网站横幅焦点图切换功能实例
本文实例讲述了jQuery实现企业网站横幅焦点图切换功能的方法。分享给大家供大家参考。具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery淡出淡入带缩略图幻灯片</title>
<scripttype="text/javascript"src="jquery-1.6.2.min.js"></script>
<style>
.flashBanner{width:782px;height:326px;
overflow:hidden;margin:0auto;
}
.flashBanner{position:relative;}
.flashBanner.mask{height:32px;line-height:32px;
background-color:#000;width:100%;
text-align:right;position:absolute;left:0;
bottom:-32px;filter:alpha(opacity=70);
-moz-opacity:0.7;opacity:0.7;overflow:hidden;
}
.flashBanner.maskimg{
vertical-align:middle;
margin-right:10px;
cursor:pointer;
}
.flashBanner.maskimg.show{margin-bottom:3px;}
</style>
<scripttype="text/javascript">
$(function(){
$(".flashBanner").each(function(){
vartimer;
$(".flashBanner.maskimg").click(function(){
varindex=$(".flashBanner.maskimg").index($(this));
changeImg(index);
}).eq(0).click();
$(this).find(".mask").animate({
"bottom":"0"
},700);
$(".flashBanner").hover(function(){
clearInterval(timer);
},function(){
timer=setInterval(function(){
varshow=$(".flashBanner.maskimg.show").index();
if(show>=$(".flashBanner.maskimg").length-1)
show=0;
else
show++;
changeImg(show);
},3000);
});
functionchangeImg(index)
{
$(".flashBanner.maskimg").removeClass("show").eq(index).addClass("show");
$(".flashBanner.bigImg").parents("a").attr("href",$(".flashBanner.maskimg").eq(index).attr("link"));
$(".flashBanner.bigImg").hide().attr("src",$(".flashBanner.maskimg").eq(index).attr("uri")).fadeIn("slow");
}
timer=setInterval(function(){
varshow=$(".flashBanner.maskimg.show").index();
if(show>=$(".flashBanner.maskimg").length-1)
show=0;
else
show++;
changeImg(show);
},3000);
});
});
</script>
</head>
<body>
<divclass="flashBanner">
<ahref="/"><imgclass="bigImg"width="782"height="326"/></a>
<divclass="mask">
<imgsrc="11.jpg"uri="11.jpg"link="/"width="60"height="22"/>
<imgsrc="22.jpg"uri="22.jpg"link="/"width="60"height="22"/>
<imgsrc="33.jpg"uri="33.jpg"link="/"width="60"height="22"/>
<imgsrc="44.jpg"uri="44.jpg"link="/"width="60"height="22"/>
<imgsrc="55.jpg"uri="55.jpg"link="/"width="60"height="22"/>
</div>
</div>
<divstyle="text-align:center;margin:50px0;font:normal14px/24px'MicroSoftYaHei';">
</div>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。
热门推荐
10 诗词送行祝福语大全简短
11 新房开工吉日祝福语简短
12 50多岁生日简短祝福语
13 安徽疫情祝福语简短英语
14 农民朋友发财祝福语简短
15 对生活祝福语简短精辟
16 搬家词简短祝福语朋友
17 女神结婚快乐祝福语简短
18 文学短句祝福语大全简短