jQuery實(shí)現(xiàn)企業(yè)網(wǎng)站橫幅焦點(diǎn)圖切換功能實(shí)例
本文實(shí)例講述了jQuery實(shí)現(xiàn)企業(yè)網(wǎng)站橫幅焦點(diǎn)圖切換功能的方法。分享給大家供大家參考。具體如下:
<!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程序設(shè)計(jì)有所幫助。
- jQuery焦點(diǎn)圖插件SaySlide
- 基于Jquery實(shí)現(xiàn)焦點(diǎn)圖淡出淡入效果
- jQuery實(shí)現(xiàn)標(biāo)題有打字效果的焦點(diǎn)圖代碼
- 基于jQuery全屏焦點(diǎn)圖左右切換插件responsiveslides
- jQuery焦點(diǎn)圖輪播特效代碼分享(3款)
- jquery帶下拉菜單和焦點(diǎn)圖代碼分享
- jQuery實(shí)現(xiàn)仿Alipay支付寶首頁全屏焦點(diǎn)圖切換特效
- jquery實(shí)現(xiàn)多屏多圖焦點(diǎn)圖切換特效的方法
- jQuery插件Elastislide實(shí)現(xiàn)響應(yīng)式的焦點(diǎn)圖無縫滾動切換特效
- jQuery實(shí)現(xiàn)的左右移動焦點(diǎn)圖效果
相關(guān)文章
jquery異步循環(huán)獲取功能實(shí)現(xiàn)代碼
頁面html的repeater控件中有一個(gè)span,需要根據(jù)指定ID異步獲取相關(guān)信息。2010-09-09jQuery+css3實(shí)現(xiàn)Ajax點(diǎn)擊后動態(tài)刪除功能的方法
這篇文章主要介紹了jQuery+css3實(shí)現(xiàn)Ajax點(diǎn)擊后動態(tài)刪除功能的方法,可實(shí)現(xiàn)點(diǎn)擊選區(qū)后出現(xiàn)選區(qū)收縮、滾動消失的效果,涉及jquery結(jié)合Ajax與數(shù)學(xué)運(yùn)算實(shí)時(shí)操作頁面元素的相關(guān)技巧,需要的朋友可以參考下2015-08-08jQuery實(shí)現(xiàn)仿美橙互聯(lián)兩級導(dǎo)航菜單效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿美橙互聯(lián)兩級導(dǎo)航菜單效果,以完整實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件實(shí)現(xiàn)針對頁面元素的遍歷及樣式的動態(tài)操作技巧,需要的朋友可以參考下2015-09-09jQuery給指定的table動態(tài)添加刪除行的操作方法
今天在項(xiàng)目中,剛好用到給指定的table添加一行、刪除一行。添加一行,支持在任意行添加一行且可配置的,刪除一行支持動態(tài)刪除一行。本文給大家介紹的非常詳細(xì),一起看看吧2016-10-10jQuery學(xué)習(xí)7 操作JavaScript對象和集合的函數(shù)
jQuery學(xué)習(xí)7:操作JavaScript對象和集合的函數(shù)2010-02-02基于jquery實(shí)現(xiàn)的樹形菜單效果代碼
這篇文章主要介紹了基于jquery實(shí)現(xiàn)的樹形菜單效果代碼,實(shí)例分析了jquery基于鼠標(biāo)事件動態(tài)改變頁面元素屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09