这篇文章主要介绍了jquery实现的图文自动轮播效果插件,涉及jquery处理鼠标事件及动画效果的方法,需要的朋友可以参考下
本文实例讲述了jquery实现的图文自动轮播效果插件。分享给大家供大家参考。具体如下：
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中获取htmlvar 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");});
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
jquery实现切换页面过渡动画效果
jquery和css3实现点赞功能
以上就是jquery实现的图文自动轮播的效果插件的详细内容。