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 相关文章推荐
在jQuery 1.5中使用deferred对象的代码(翻译)
Mar 10 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
Jquery获取radio选中的值
May 05 jQuery
基于webpack 实用配置方法总结
Sep 28 Javascript
详解vue 兼容IE报错解决方案
Dec 29 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
js Math数学简单使用操作示例
Mar 13 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 广告调用类代码(支持Flash调用)
2011/08/11 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
JS常见问题整理(持续更新)
2013/08/06 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
使用python 获取进程pid号的方法
2014/03/10 Python
Python计算两个日期相差天数的方法示例
2017/05/23 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
python打造爬虫代理池过程解析
2019/08/15 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
python dumps和loads区别详解
2020/02/04 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
咨询公司各岗位职责
2013/12/02 职场文书
销售工作岗位职责
2013/12/24 职场文书
数控专业毕业生自荐信范文
2014/03/04 职场文书
旅游节目策划方案
2014/05/26 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
大学生自我评价范文
2015/03/03 职场文书
Python实现数据的序列化操作详解
2022/07/07 Python
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS