JQuery实现的图文自动轮播效果插件
本文实例讲述了JQuery实现的图文自动轮播效果插件。分享给大家供大家参考。具体如下：
intervalID=setInterval(cycleImage,slidetime);
$(".main_image.desc").show();//展示图片
$(".main_image.block").animate({opacity:0.85},1);//设置透明度
//点击和悬停事件
$(".image_thumbulli:first").addClass('active');
$(".image_thumbulli").click(function(){
//设置参数
varimgAlt=$(this).find('img').attr("alt");
varimgTitle=$(this).find('a').attr("href");
varimgDesc=$(this).find('.block').html();//从类block中获取html
varimgDescHeight=$(".main_image").find('.block').height();
//计算类block的高度
if($(this).is(".active")){//如果已经激活了，之后的操作...
returnfalse;
}else{
//动画操作
$(".main_image.block").animate({opacity:0,marginBottom:-imgDescHeight},250,function(){
$(".main_image.block").html(imgDesc).animate({opacity:0.85,marginBottom:"0"},250);
$(".main_imageimg").attr({src:imgTitle,alt:imgAlt});
});
}
$(".image_thumbulli").removeClass('active');
$(this).addClass('active');
returnfalse;
}).hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
});
//ToggleTeaser
$("a.collapse").click(function(){
$(".main_image.block").slideToggle();
$("a.collapse").toggleClass("show");
});
希望本文所述对大家的jQuery程序设计有所帮助。