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

 更新时间:2015年06月19日 15:20:07   作者:任意球  
这篇文章主要介绍了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中获取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程序设计有所帮助。

相关文章

  • JQuery控制div外点击隐藏而div内点击不会隐藏的方法

    JQuery控制div外点击隐藏而div内点击不会隐藏的方法

    这篇文章主要介绍了JQuery控制div外点击隐藏而div内点击不会隐藏的方法,涉及show、hide及stopPropagation等方法的使用技巧,需要的朋友可以参考下
    2015-01-01
  • 基于jQuery的仿flash的广告轮播代码

    基于jQuery的仿flash的广告轮播代码

    很多网站的首页都有广告轮播,今天闲来看了一网站的首页广告轮播方式,是通过 jQuery的blockSlide插件实现的,然后自己测试了一下,很好。
    2010-11-11
  • jquery使用jxl插件导出excel示例

    jquery使用jxl插件导出excel示例

    这篇文章主要介绍了jquery使用jxl插件导出excel的具体实现步骤,需要的朋友可以参考下
    2014-04-04
  • 强烈推荐240多个jQuery插件提供下载

    强烈推荐240多个jQuery插件提供下载

    jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及 的,它兼容 CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。
    2008-06-06
  • jQuery 获取跨域XML(RSS)数据的相关总结分析

    jQuery 获取跨域XML(RSS)数据的相关总结分析

    下面小编就为大家带来一篇jQuery 获取跨域XML(RSS)数据的相关总结分析。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • jQuery通过控制节点实现仅在前台通过get方法完成参数传递

    jQuery通过控制节点实现仅在前台通过get方法完成参数传递

    这篇文章主要介绍了jQuery通过控制节点实现仅在前台通过get方法完成参数传递的功能,实例分析了jQuery操作节点的技巧与控制前台get方法传递参数的用法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • JQuery操作表格(隔行着色,高亮显示,筛选数据)

    JQuery操作表格(隔行着色,高亮显示,筛选数据)

    最近项目里对表格的操作比较多。以往我们要做一些效果的时候往往通过程序代码来实现,这个努力不值,因为JQuery是完全可以做到的,并且是客户端运行,不经过服务器处理,给用户的反应快,也减少了服务器压力
    2012-02-02
  • 使用jQuery实现购物车结算功能

    使用jQuery实现购物车结算功能

    这篇文章主要为大家详细介绍了使用jQuery实现购物车结算功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • jquery实现可点击伸缩与展开的菜单效果代码

    jquery实现可点击伸缩与展开的菜单效果代码

    这篇文章主要介绍了jquery实现可点击伸缩与展开的菜单效果代码,涉及jquery鼠标click事件控制页面元素样式变换的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • jQuery初识之设计思想方法函数示例

    jQuery初识之设计思想方法函数示例

    这篇文章主要为大家介绍了jQuery初识之设计思想及方法函数示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06

最新评论