本文實例講述了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;elseshow ++;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;elseshow ++;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程序設計有所幫助。
新聞熱點
疑難解答
