jQuery实现企业网站横幅焦点图切换功能实例

本文实例讲述了jQuery实现企业网站横幅焦点图切换功能的方法。分享给大家供大家参考。具体如下：

<!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>

<title>jQuery淡出淡入带缩略图幻灯片</title>

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>

<style>

.flashBanner{width:782px;height:326px;

overflow:hidden;margin:0 auto;

}

.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 .mask img{

vertical-align:middle;

margin-right:10px;

cursor:pointer;

}

.flashBanner .mask img.show{margin-bottom:3px;}

</style>

<script type="text/javascript">

$(function(){

$(".flashBanner").each(function(){

var timer;

$(".flashBanner .mask img").click(function(){

var index = $(".flashBanner .mask img").index($(this));

changeImg(index);

}).eq(0).click();

$(this).find(".mask").animate({

"bottom":"0"

},700);

$(".flashBanner").hover(function(){

clearInterval(timer);

},function(){

timer = setInterval(function(){

var show = $(".flashBanner .mask img.show").index();

if (show >= $(".flashBanner .mask img").length-1)

show = 0;

else

show ++;

changeImg(show);

},3000);

});

function changeImg (index)

{

$(".flashBanner .mask img").removeClass("show").eq(index).addClass("show");

$(".flashBanner .bigImg").parents("a").attr("href",$(".flashBanner .mask img").eq(index).attr("link"));

$(".flashBanner .bigImg").hide().attr("src",$(".flashBanner .mask img").eq(index).attr("uri")).fadeIn("slow");

}

timer = setInterval(function(){

var show = $(".flashBanner .mask img.show").index();

if (show >= $(".flashBanner .mask img").length-1)

show = 0;

else

show ++;

changeImg(show);

},3000);

});

});

</script>

</head>

<body>

<div class="flashBanner">

<a href="/"><img class="bigImg" width="782" height="326" /></a>

<div class="mask">

<img src="11.jpg" uri="11.jpg" link="/" width="60" height="22"/>

<img src="22.jpg" uri="22.jpg" link="/" width="60" height="22"/>

<img src="33.jpg" uri="33.jpg" link="/" width="60" height="22"/>

<img src="44.jpg" uri="44.jpg" link="/" width="60" height="22"/>

<img src="55.jpg" uri="55.jpg" link="/" width="60" height="22"/>

</div>

</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

</div>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。