非常棒的jQuery圖片輪播效果
本文實例為大家分享了jQuery圖片輪播效果,很個性,具體內(nèi)容如下
購物產(chǎn)品展示:圖片輪播器,效果如下所示:
思路說明:
每隔一段時間,實現(xiàn)圖片的自動切換及選項卡選中效果
兩個區(qū)域:
最外層容器區(qū)域,如上圖紅色線框矩形
選項卡區(qū)域
兩個事件:
鼠標(biāo)懸浮或鼠標(biāo)劃入mouseover
鼠標(biāo)離開mouseleave
/**大屏廣告滾動樣式**/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery個性化圖片輪播效果</title> <link rel="stylesheet" href="styles/main.css" type="text/css" /> <script src="js/jquery-2.2.3.min.js" type="text/javascript"></script> <script src="js/imagesScroll.js" type="text/javascript"></script> </head> <body> <!-- 大屏廣告 start --> <div id="jnImageroll"> <a href="#nogo" id="JS_imgWrap"> <img src="images/ads/1.jpg" alt="相約情人節(jié)"/> <img src="images/ads/2.jpg" alt="新款上線"/> <img src="images/ads/3.jpg" alt="憤怒小鳥特賣"/> <img src="images/ads/4.jpg" alt="男鞋促銷第一波"/> <img src="images/ads/5.jpg" alt="春季新品發(fā)布"/> </a> <div> <a href="###1"><em>相約情人節(jié)</em><em>全場119元起</em></a> <a href="###2"><em>新款上線</em><em>全場357元起</em></a> <a href="###3"><em>憤怒小鳥特賣</em><em>全場89元</em></a> <a href="###4"><em>男鞋促銷第一波</em><em>全場3.1折起</em></a> <a href="###5" class="last"><em>春季新品發(fā)布</em><em>全場4.1折起</em></a> </div> </div> <!-- 大屏廣告 end --> </body> </html>
#jnImageroll{ width:550px; height:321px; overflow: hidden; position: relative; } #jnImageroll img{ position: absolute; left: 0; top: 0; } #jnImageroll div{ position: absolute; left: 0; bottom: 0; } #jnImageroll div a{ width: 79px; background: #444444; float: left; display: inline-block; margin-right: 1px; text-align: center; padding: 5px 15px; text-decoration: none; color: #FFFFFF; font: 14px/1.5 tahoma,arial; } #jnImageroll div a em{ display: block;/*將行內(nèi)元素變成塊級元素*/ height: 19px; overflow: hidden; } #jnImageroll a.chos { background: #37A7D7; color: #FFFFFF; }
/* 首頁大屏廣告效果 */ $(function(){ var $imgrolls = $("#jnImageroll div a");//選項卡區(qū)域 $imgrolls.css("opacity","0.7"); //設(shè)置選項卡透明度 var len = $imgrolls.length; var index = 0; var adTimer = null; //選項卡的鼠標(biāo)懸浮、離開調(diào)用函數(shù) $imgrolls.mouseover(function(){ index = $imgrolls.index(this); showImg(index); }).eq(0).mouseover(); //滑入 停止動畫,滑出開始動畫. $('#jnImageroll').hover(function(){ if(adTimer){ clearInterval(adTimer); } },function(){ adTimer = setInterval(function(){ showImg(index); index++; if(index==len){index=0;} } , 5000); }).trigger("mouseleave"); }) //顯示不同的幻燈片 function showImg(index){ var $rollobj = $("#jnImageroll"); var $rolllist = $rollobj.find("div a"); var newhref = $rolllist.eq(index).attr("href"); $("#JS_imgWrap").attr("href",newhref) .find("img").eq(index).stop(true,true).fadeIn().siblings().fadeOut(); $rolllist.removeClass("chos").css("opacity","0.7") .eq(index).addClass("chos").css("opacity","1"); }
以上就是很有個性的jQuery圖片輪播效果,希望大家喜歡。
- jQuery圖片輪播實現(xiàn)并封裝(一)
- jQuery實現(xiàn)的圖片輪播效果完整示例
- jQuery的圖片輪播插件PgwSlideshow使用詳解
- jQuery插件實現(xiàn)圖片輪播特效
- jQuery圖片輪播插件——前端開發(fā)必看
- 使用jQuery制作基礎(chǔ)的Web圖片輪播效果
- 簡單的jQuery banner圖片輪播實例代碼
- 基于JQuery實現(xiàn)圖片輪播效果(焦點圖)
- jQuery插件實現(xiàn)帶圓點的焦點圖片輪播切換
- jQuery動畫效果圖片輪播特效
- 基于jQuery實現(xiàn)左右圖片輪播(原理通用)
- jQuery手動點擊實現(xiàn)圖片輪播特效
- jQuery圖片輪播(二)利用構(gòu)造函數(shù)和原型創(chuàng)建對象以實現(xiàn)繼承
相關(guān)文章
簡單談?wù)刯Query(function(){})與(function(){})(jQuery)
這篇文章主要簡單介紹了jQuery(function(){})與(function(){})(jQuery)的區(qū)別,需要的朋友可以參考下2014-12-12利用jqprint插件打印頁面內(nèi)容的實現(xiàn)方法
qprint是一個基于jquery編寫的頁面打印的一個小插件,但是不得不承認這個插件確實很厲害,下面這篇文章主要給大家介紹了關(guān)于利用jqprint插件如何打印頁面內(nèi)容的實現(xiàn)方法,需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01jQuery ajax調(diào)用后臺aspx后臺文件的兩種常見方法(不是ashx)
這篇文章主要介紹了jQuery ajax調(diào)用后臺aspx后臺文件的兩種常見方法(不是ashx)的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-06-06jQuery解析XML文件同時動態(tài)增加js文件的方法
這篇文章主要介紹了jQuery解析XML文件同時動態(tài)增加js文件的方法,涉及jQuery Ajax調(diào)用及返回函數(shù)中增加js文件的相關(guān)使用技巧,需要的朋友可以參考下2015-06-06使用jQuery獲取radio/checkbox組的值的代碼收集
很久沒有寫JQuery的文章了。今天來看下JQ對天Checkbox復(fù)選框的操作??聪旅娴囊粋€小例子。在這個例子中包括了以下幾個功能2009-12-12JQuery入門——事件切換之toggle()方法應(yīng)用介紹
在toggle()方法中,可以依次調(diào)用N個指定的函數(shù),直到最后一個函數(shù),然后重復(fù)對這個函數(shù)輪番調(diào)用,在函數(shù)之間切換調(diào)用的時候相當(dāng)?shù)姆奖?接下來將會詳細介紹toggle()方法的使用,感興趣的你可不要錯過了啊2013-02-02JS實現(xiàn)點擊生成UUID的方法完整實例【基于jQuery】
這篇文章主要介紹了JS實現(xiàn)點擊生成UUID的方法,結(jié)合完整實例形式分析了基于jQuery實現(xiàn)的隨機字符串生成相關(guān)操作技巧,需要的朋友可以參考下2019-06-06