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程序设计有所帮助。
热门推荐
3 祝福语简短的微信
10 幼儿祝福语大全简短贺卡
11 感谢教官文案祝福语简短
12 鼠年同事祝福语简短创意
13 元旦祝福语 简短独特群发
14 妈咪跟我生日祝福语简短
15 给儿子新婚祝福语简短
16 伴娘祝福语长文案简短
17 恭喜高考完祝福语简短
18 生日祝福语送老公简短