一款jquery特效編寫的大度寬屏焦點(diǎn)圖切換特效的實(shí)例代碼
更新時(shí)間:2013年08月05日 11:04:15 作者:
焦點(diǎn)圖顯示區(qū)域有固定的寬度,當(dāng)前顯示寬度之外是一個(gè)半透明層顯示的其它的焦點(diǎn)圖片,最好的是,此特效兼容ie6以及其它瀏覽器。
適用瀏覽器:ie6、ie7、ie8、360、firefox、chrome、safari、opera、傲游、搜狗、世界之窗.
主要代碼如下:
<script type="text/javascript">
jquery(".slider .bd li").first().before( jquery(".slider .bd li").last() );
jquery(".slider").hover(function(){
jquery(this).find(".arrow").stop(true,true).fadein(300)
},function(){
jquery(this).find(".arrow").fadeout(300) });
jquery(".slider").slide(
{ titcell:".hd ul", maincell:".bd ul", effect:"leftloop",autoplay:true, vis:3,autopage:true, trigger:"click"}
);
</script>
效果圖如下:
主要代碼如下:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
jquery(".slider .bd li").first().before( jquery(".slider .bd li").last() );
jquery(".slider").hover(function(){
jquery(this).find(".arrow").stop(true,true).fadein(300)
},function(){
jquery(this).find(".arrow").fadeout(300) });
jquery(".slider").slide(
{ titcell:".hd ul", maincell:".bd ul", effect:"leftloop",autoplay:true, vis:3,autopage:true, trigger:"click"}
);
</script>
效果圖如下:

您可能感興趣的文章:
- Jquery 焦點(diǎn)圖 用于圖片展示效果代碼
- 基于JQuery的實(shí)現(xiàn)圖片輪播效果(焦點(diǎn)圖)
- jquery實(shí)現(xiàn)的帶縮略圖的焦點(diǎn)圖片切換(自動(dòng)播放/響應(yīng)鼠標(biāo)動(dòng)作)
- jquery焦點(diǎn)圖片切換(數(shù)字標(biāo)注/手動(dòng)/自動(dòng)播放/橫向滾動(dòng))
- 基于jquery的網(wǎng)站幻燈片切換效果焦點(diǎn)圖代碼
- jquery 無(wú)限級(jí)下拉菜單的簡(jiǎn)單實(shí)現(xiàn)代碼
- 用jquery實(shí)現(xiàn)的一個(gè)超級(jí)簡(jiǎn)單的下拉菜單
- jquery中使用循環(huán)下拉菜單示例代碼
- 使用jQuery仿蘋果官網(wǎng)焦點(diǎn)圖特效
- jQuery實(shí)現(xiàn)的圖片分組切換焦點(diǎn)圖插件
- jQuery實(shí)現(xiàn)漸變下拉菜單的簡(jiǎn)單方法
- jquery實(shí)現(xiàn)焦點(diǎn)圖片隨機(jī)切換效果的方法
- jQuery實(shí)現(xiàn)精美的多級(jí)下拉菜單特效
- jQuery+css3動(dòng)畫屬性制作獵豹瀏覽器寬屏banner焦點(diǎn)圖
- jQuery實(shí)現(xiàn)左右切換焦點(diǎn)圖
- jQuery實(shí)現(xiàn)簡(jiǎn)單二級(jí)下拉菜單
- jQuery結(jié)合CSS制作漂亮的select下拉菜單
- jQuery樹(shù)形下拉菜單特效代碼分享
- jQuery左側(cè)大圖右側(cè)小圖焦點(diǎn)圖幻燈切換代碼分享
- jquery帶下拉菜單和焦點(diǎn)圖代碼分享
相關(guān)文章
jQuery對(duì)底部導(dǎo)航進(jìn)行跳轉(zhuǎn)并高亮顯示的實(shí)例代碼
這篇文章主要介紹了jQuery對(duì)底部導(dǎo)航進(jìn)行跳轉(zhuǎn)并高亮顯示的實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04Jquery組件easyUi實(shí)現(xiàn)表單驗(yàn)證示例
這篇文章主要為大家詳細(xì)介紹了Jquery插件easyUi實(shí)現(xiàn)表單驗(yàn)證的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08為jQuery.Treeview添加右鍵菜單的實(shí)現(xiàn)代碼
jquery.treeview 數(shù)據(jù)通過(guò)JSON數(shù)據(jù)加載,有需要的朋友,可以通jquery的AJAX方法獲取相關(guān)的JSON數(shù)據(jù)。2010-10-10jquery autocomplete自動(dòng)完成插件的的使用方法
最近剛開(kāi)始學(xué)jquery,想實(shí)現(xiàn)類似GOOGLE搜索時(shí)自動(dòng)顯示出相關(guān)結(jié)果的效果。于是選擇了使用jquery autocomplete插件。2010-08-08jquery實(shí)現(xiàn)網(wǎng)頁(yè)查找功能示例分享
當(dāng)需要在頁(yè)面中查找某個(gè)關(guān)鍵字時(shí),一是可以通過(guò)瀏覽器的查找功能實(shí)現(xiàn),二是可以通過(guò)前端腳本準(zhǔn)確查找定位,本文介紹通過(guò)jQuery實(shí)現(xiàn)的頁(yè)面內(nèi)容查找定位的功能,并可擴(kuò)展顯示查找后的相關(guān)信息2014-02-02jQuery旋轉(zhuǎn)插件jqueryrotate用法詳解
這篇文章主要介紹了jQuery旋轉(zhuǎn)插件jqueryrotate用法,結(jié)合實(shí)例形式詳細(xì)分析了jqueryrotate插件的功能、定義及相關(guān)參數(shù)的使用方法,需要的朋友可以參考下2016-10-10