JQuery實(shí)現(xiàn)的圖文自動(dòng)輪播效果插件
本文實(shí)例講述了JQuery實(shí)現(xiàn)的圖文自動(dòng)輪播效果插件。分享給大家供大家參考。具體如下:
intervalID = setInterval(cycleImage, slidetime); $(".main_image .desc").show(); // 展示圖片 $(".main_image .block").animate({ opacity: 0.85 }, 1 ); // 設(shè)置透明度 //點(diǎn)擊和懸停事件 $(".image_thumb ul li:first").addClass('active'); $(".image_thumb ul li").click(function(){ // 設(shè)置參數(shù) var imgAlt = $(this).find('img').attr("alt"); var imgTitle = $(this).find('a').attr("href"); var imgDesc = $(this).find('.block').html(); // 從類block中獲取html var imgDescHeight = $(".main_image").find('.block').height(); // 計(jì)算類block的高度 if ($(this).is(".active")) { // 如果已經(jīng)激活了,之后的操作... return false; } else { // 動(dòng)畫操作 $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() { $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,marginBottom: "0" }, 250 ); $(".main_image img").attr({ src: imgTitle , alt: imgAlt}); }); } $(".image_thumb ul li").removeClass('active'); $(this).addClass('active'); return false; }) .hover(function(){ $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); // Toggle Teaser $("a.collapse").click(function(){ $(".main_image .block").slideToggle(); $("a.collapse").toggleClass("show"); });
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- jquery實(shí)現(xiàn)簡(jiǎn)單自動(dòng)輪播圖效果
- jquery實(shí)現(xiàn)定時(shí)自動(dòng)輪播特效
- 基于jQuery實(shí)現(xiàn)自動(dòng)輪播旋轉(zhuǎn)木馬特效
- jquery帶有索引按鈕且自動(dòng)輪播切換特效代碼分享
- 12款經(jīng)典的白富美型—jquery圖片輪播插件—前端開(kāi)發(fā)必備
- Jquery代碼實(shí)現(xiàn)圖片輪播效果(一)
- 原生js和jquery實(shí)現(xiàn)圖片輪播特效
- jQuery圖片輪播的具體實(shí)現(xiàn)
- 基于JQuery的實(shí)現(xiàn)圖片輪播效果(焦點(diǎn)圖)
- jquery實(shí)現(xiàn)圖片自動(dòng)輪播效果
相關(guān)文章
jQuery表格插件ParamQuery簡(jiǎn)單使用方法示例
這篇文章主要介紹了jQuery表格插件ParamQuery簡(jiǎn)單使用方法示例,大家參考使用吧2013-12-12Jquery通過(guò)Ajax訪問(wèn)XML數(shù)據(jù)的小例子
這篇文章主要介紹了Jquery通過(guò)Ajax訪問(wèn)XML數(shù)據(jù),有需要的朋友可以參考一下2013-11-11ThinkPHP+jquery實(shí)現(xiàn)“加載更多”功能代碼
本篇文章主要介紹了ThinkPHP+jquery實(shí)現(xiàn)“加載更多”功能代碼,以實(shí)例代碼講訴了加載更多的代碼實(shí)現(xiàn),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-03-03基于jquery的下拉框改變動(dòng)態(tài)添加和刪除表格實(shí)現(xiàn)代碼
以前很少用jquery,現(xiàn)在工作需要,用上了,感覺(jué)真的很方便!不用再像以前那樣寫那么多多余的Js了!看來(lái)得在jquery上花點(diǎn)功夫呢!2011-03-03jQuery+HTML5+CSS3制作支持響應(yīng)式布局時(shí)間軸插件
這篇文章主要為大家詳細(xì)介紹了JQuery+HTML5+CSS3制作時(shí)間軸,支持響應(yīng)式布局時(shí)間軸插件,感興趣的小伙伴們可以參考一下2016-08-08jQuery+slidereveal實(shí)現(xiàn)的面板滑動(dòng)側(cè)邊展出效果
WEB開(kāi)發(fā)中有時(shí)需要在頁(yè)面上設(shè)置一個(gè)控制面板,默認(rèn)是不顯示的,當(dāng)用戶有需要時(shí)可以通過(guò)按鈕觸發(fā)調(diào)用面板展示。常見(jiàn)的有頁(yè)面?zhèn)冗吇雒姘逍Ч?。本文將使用jQuery插件并結(jié)合實(shí)例給大家介紹一下面板滑動(dòng)展示效果。2015-03-03jQuery獲取Select選擇的Text和Value(詳細(xì)匯總)
Select選擇的Text和Value在使用中可能都需要獲取到它們的值,以至搜集用戶的需求,本文整理了一些常用而實(shí)用的操作技巧,感興趣的朋友可以了解下,就當(dāng)鞏固自己的知識(shí)了,希望本文對(duì)你有所幫助2013-01-01jQuery實(shí)現(xiàn)指定區(qū)域外單擊關(guān)閉指定層的方法【經(jīng)典】
這篇文章主要介紹了jQuery實(shí)現(xiàn)指定區(qū)域外單擊關(guān)閉指定層的方法,可實(shí)現(xiàn)在彈出層外任意位置點(diǎn)擊關(guān)閉彈出層的功能,涉及jQuery事件操作方法,包含了詳盡的代碼功能說(shuō)明,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-06-06Jquery 綁定時(shí)間實(shí)現(xiàn)代碼
jquery 顯示本地時(shí)間/ 帶日期、星期/ UTC,需要的朋友可以參考下。2011-05-05