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 相关文章推荐
javascript 有用的脚本函数
May 07 Javascript
简略的前端架构心得&&基于editor为例子的编码小技巧
Nov 25 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
javascript实现移动端红包雨页面
Jun 23 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 Javascript
vue首次渲染全过程
Apr 21 Vue.js
移除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基础知识:类与对象(1)
2006/12/13 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
JavaScript日历实现代码
2010/09/12 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
Python如何使用input函数获取输入
2020/08/06 Python
Python LMDB库的使用示例
2021/02/14 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
最新的大学生找工作自我评价
2013/09/29 职场文书
毕业生求职简历中的自我评价
2013/10/18 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
离婚财产处理协议书
2014/09/30 职场文书
电气工程师岗位职责
2015/02/12 职场文书
优秀新员工事迹材料
2019/05/13 职场文书
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis