45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:JQuery图文自动轮播效果实现插件分享

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

2015-07-20 14:09:01 来源:www.45fan.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中获取html
var 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程序设计有所帮助。


本文地址:http://www.45fan.com/bcdm/15097.html
Tags: 实现 图文 jquery
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部