本文实例讲述了jQuery实现宽屏图片轮播实例教程。分享给大家供大家参考。具体如下: 运行效果截图如下:
引入jquery库
整个代码分为三部分:
CSS样式 这里的CSS可以根据项目需求自定义,不必拘泥于下面的代码,只要弄懂其中的原理就OK了。若你看不懂下面的CSS的话就恶补下吧,在此就不一一讲解了。
JS代码 终于来到重点部分了,这部分的代码不多,一起来看下吧。
$btns.find('a:eq(' + i + ')').addClass('ggOn').siblings().removeClass('ggOn');
//找到TAB按钮中的第i个a标签,为其加上ggOn的样式,同时移除所有同级的a标签ggOn样式
var curr = $box.find('a:eq(' + i + ')'),prev = curr.siblings();
//定义curr变量,并赋值为$box中当前显示图片的a标签,定义prev变量,赋值为$box中除了当前显示图片的A标签外的所有A标签。
prev.css('z-index',2);//$box中除了当前显示图片的A标签外的所有A标签的index值变为2,即向下移一层
curr.css('z-index',3).animate({ //$box中当前显示图片的a标签index值变为3,即向上移一层,然后使用jquery动画以150毫秒把透明度变为1,之后执行匿名函数function。
'opacity': 1
},150,function () { //$box中除了当前显示图片的A标签外的所有A标签的index值变为1,并把透明度变为0.1
prev.css({
'z-index': 1,'opacity': 0.1
});
});
},loop = setInterval(autoChange,5000);//定义定时器,每5秒执行一次autoChange函数,达到自动播放效果。
$con.hover(function () { //定义鼠标悬浮与离开事件
clearInterval(loop); //鼠标悬浮时移除Loog定时器,即停止播放
},function () {
loop = setInterval(autoChange,5000); //鼠标离开时载放Loog定时器,继续播放
});
$btns.find('a').click(function () {//定义tab按钮事件
i = $(this).index() - 1; //tab按钮中当前A标签的index值-1,并赋值给i计数器
autoChange(); //调用切换方法切换图片
});
});
1、图片切换 以i作为计数器,显示当前为i的图片,其它图片全部隐藏,给当前为i的按钮加上ggOn样式,其它按钮去除ggOn样式,而每次调用切换函数时i自增1。 2、自动播放 定义一个定时器loop,每5秒调用一次切换函数。 3、鼠标hover事件 原来就是鼠标悬浮时清除loop定时器,鼠标离开时载入loop定时器。 4、按钮事件 绑定tab按钮单击事件,单击后给i赋上当前tab按钮的index值-1,调用切换函数。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。