JQuery實現(xiàn)的圖文自動輪播效果插件
本文實例講述了JQuery實現(xiàn)的圖文自動輪播效果插件。分享給大家供大家參考。具體如下:
intervalID = setInterval(cycleImage, slidetime); $(".main_image .desc").show(); // 展示圖片 $(".main_image .block").animate({ opacity: 0.85 }, 1 ); // 設(shè)置透明度 //點擊和懸停事件 $(".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(); // 計算類block的高度 if ($(this).is(".active")) { // 如果已經(jīng)激活了,之后的操作... return false; } else { // 動畫操作 $(".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"); });
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
Jquery通過Ajax訪問XML數(shù)據(jù)的小例子
這篇文章主要介紹了Jquery通過Ajax訪問XML數(shù)據(jù),有需要的朋友可以參考一下2013-11-11ThinkPHP+jquery實現(xiàn)“加載更多”功能代碼
本篇文章主要介紹了ThinkPHP+jquery實現(xiàn)“加載更多”功能代碼,以實例代碼講訴了加載更多的代碼實現(xiàn),非常具有實用價值,需要的朋友可以參考下2017-03-03基于jquery的下拉框改變動態(tài)添加和刪除表格實現(xiàn)代碼
以前很少用jquery,現(xiàn)在工作需要,用上了,感覺真的很方便!不用再像以前那樣寫那么多多余的Js了!看來得在jquery上花點功夫呢!2011-03-03jQuery+HTML5+CSS3制作支持響應(yīng)式布局時間軸插件
這篇文章主要為大家詳細介紹了JQuery+HTML5+CSS3制作時間軸,支持響應(yīng)式布局時間軸插件,感興趣的小伙伴們可以參考一下2016-08-08jQuery+slidereveal實現(xiàn)的面板滑動側(cè)邊展出效果
WEB開發(fā)中有時需要在頁面上設(shè)置一個控制面板,默認是不顯示的,當(dāng)用戶有需要時可以通過按鈕觸發(fā)調(diào)用面板展示。常見的有頁面?zhèn)冗吇雒姘逍Ч1疚膶⑹褂胘Query插件并結(jié)合實例給大家介紹一下面板滑動展示效果。2015-03-03jQuery獲取Select選擇的Text和Value(詳細匯總)
Select選擇的Text和Value在使用中可能都需要獲取到它們的值,以至搜集用戶的需求,本文整理了一些常用而實用的操作技巧,感興趣的朋友可以了解下,就當(dāng)鞏固自己的知識了,希望本文對你有所幫助2013-01-01jQuery實現(xiàn)指定區(qū)域外單擊關(guān)閉指定層的方法【經(jīng)典】
這篇文章主要介紹了jQuery實現(xiàn)指定區(qū)域外單擊關(guān)閉指定層的方法,可實現(xiàn)在彈出層外任意位置點擊關(guān)閉彈出層的功能,涉及jQuery事件操作方法,包含了詳盡的代碼功能說明,非常簡單實用,需要的朋友可以參考下2016-06-06