JQuery實現的圖文自動輪播效果外掛程式

JQuery實現的圖文自動輪播效果外掛程式

 　　本文執行個體講述了JQuery實現的圖文自動輪播效果外掛程式。分享給大家供大家參考。具體如下：

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

intervalID = setInterval(cycleImage, slidetime); $(".main_image .desc").show(); // 展示圖片 $(".main_image .block").animate({ opacity: 0.85 }, 1 ); // 設定透明度 //點擊和懸停事件 $(".image_thumb ul li:first").addClass('active'); $(".image_thumb ul li").click(function(){ // 設定參數 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")) { // 如果已經啟用了，之後的操作... 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程式設計有所協助。