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

时间：2021-05-26

本文实例讲述了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程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章