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 相关文章推荐
var与Javascript变量隐式声明
Sep 17 Javascript
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
js+CSS实现弹出居中背景半透明div层的方法
Feb 26 Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
React从react-router路由上做登陆验证控制的方法
May 10 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
JS实现电商商品展示放大镜特效
Jan 07 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 Javascript
详解Anyscript开发指南绕过typescript类型检查
Sep 23 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连接函数implode与分割explode的深入解析
2013/06/26 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
CI框架表单验证实例详解
2016/11/21 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
javascript 事件绑定问题
2011/01/01 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
泛谈JS逻辑判断选择器 || &&
2019/05/24 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
浅谈MySQL中的触发器
2015/05/05 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
幼儿园母亲节活动方案
2014/03/10 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python
python字典进行运算原理及实例分享
2021/08/02 Python
详细聊聊vue中组件的props属性
2021/11/02 Vue.js