AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

JQuery实现的图文自动轮播效果插件

51自学网 http://www.wanshiok.com
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,图文,轮播  
上一篇:jquery实现的代替传统checkbox样式插件  下一篇:移除AngularJS下URL中的#字符的方法