jQuery實現(xiàn)企業(yè)網(wǎng)站橫幅焦點圖切換功能實例

2024-05-06 16:19:04

字體：大中小

供稿：網(wǎng)友

這篇文章主要介紹了jQuery實現(xiàn)企業(yè)網(wǎng)站橫幅焦點圖切換功能,實例分析了jQuery企業(yè)網(wǎng)站焦點圖的詳細實現(xiàn)方法,非常簡單實用,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)企業(yè)網(wǎng)站橫幅焦點圖切換功能的方法。分享給大家供大家參考。具體如下：

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