In diesem Artikel wird hauptsächlich das von JQuery implementierte automatische Bild- und Textkarusselleffekt-Plug-in vorgestellt, das die Methode von jQuery zur Verarbeitung von Mausereignissen und Animationseffekten umfasst. Freunde in Not können sich darauf beziehen
Das Beispiel dieses Artikels Beschreibt die Implementierung des automatischen Bild- und Textkarusselleffekt-Plug-Ins von JQuery. Teilen Sie es als Referenz mit allen. Die Details sind wie folgt:
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"); });
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein . Bitte achten Sie auf weitere verwandte PHP-Websites!
Verwandte Empfehlungen:
jQuery implementiert den Seitenübergangsanimationseffekt
jQuery und CSS3 implementieren die Like-Funktion
Das obige ist der detaillierte Inhalt vonVon JQuery implementiertes automatisches Karusselleffekt-Plug-in für Bilder und Texte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!