您好,欢迎访问一九零五行业门户网

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程序设计有所帮助。
其它类似信息

推荐信息