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程序设计有所帮助。
热门推荐
10 祝女儿简短祝福语大全
11 大学新年祝福语简短创意
12 元旦适合的祝福语简短
13 朋友出远门祝福语简短
14 初六简短的祝福语
15 祝男孩生日祝福语简短
16 同事调离的祝福语简短
17 拜年红包的祝福语简短
18 妈妈生日祝福语简短励志