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中判断对象类型的几种方法总结
Nov 11 Javascript
动态加载jquery库的方法
Feb 12 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
canvas绘制环形进度条
Feb 23 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
vue路由教程之静态路由
Sep 03 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
vue+element ui实现锚点定位
Jun 29 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如何编写易读的代码
2007/07/10 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
Python中的True,False条件判断实例分析
2015/01/12 Python
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
MySQL最常见的操作语句小结
2015/05/07 Python
详解Python编程中time模块的使用
2015/11/20 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
信号生成及DFT的python实现方式
2020/02/25 Python
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
园林设计专业毕业生求职信
2014/03/23 职场文书
法定代表人授权委托书
2014/09/19 职场文书
个人买房协议书范本
2014/10/06 职场文书
领导干部考核评语
2015/01/04 职场文书
工程部经理岗位职责
2015/02/02 职场文书
出生证明格式
2015/06/15 职场文书
A22国内电台短波广播频率表
2022/05/10 无线电