Plug-in d'effet carrousel automatique d'image et de texte implémenté par JQuery

Cet article présente principalement le plug-in d'effet carrousel automatique d'images et de texte implémenté par JQuery, impliquant la méthode de traitement des événements de souris et des effets d'animation de jQuery. Les amis dans le besoin peuvent s'y référer

L'exemple de cet article. décrit l'implémentation du plug-in d'effet carrousel d'image et de texte JQuery Automatic. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

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");
});

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il vous sera utile. l'étude de tout le monde. Plus de contenu connexe Veuillez faire attention au site Web chinois PHP !

Recommandations associées :

jQuery implémente l'effet d'animation de transition de page

jQuery et CSS3 implémentent la fonction like

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!