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


Posted in Javascript onJune 19, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
vue组件的写法汇总
Apr 12 Javascript
react 应用多入口配置及实践总结
Oct 17 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 #Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 #Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 #Javascript
使用AngularJS实现表单向导的方法
Jun 19 #Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 #Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 #Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 #Javascript
You might like
php调用mysql存储过程
2007/02/14 PHP
php面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
PHP+ajax 无刷新删除数据
2010/02/20 PHP
PHP分页函数代码(简单实用型)
2010/12/02 PHP
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
javascript使用location.search的示例
2013/11/05 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
js动态引入的四种方法
2018/05/05 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python抓取网页图片示例(python爬虫)
2014/04/27 Python
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
解读Python编程中的命名空间与作用域
2015/10/16 Python
Django返回json数据用法示例
2016/09/18 Python
python3实现基于用户的协同过滤
2018/05/31 Python
Python之修改图片像素值的方法
2019/07/03 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
自我评价范文
2013/12/22 职场文书
记者岗位职责
2014/01/06 职场文书
同学聚会老师邀请函
2014/01/28 职场文书
音乐教师求职信范文
2015/03/20 职场文书
Golang二维数组的使用方式
2021/05/28 Golang