本文实例讲述了jQuery实现宽屏图片轮播实例教程。分享给大家供大家参考。具体如下： 运行效果截图如下：
引入jquery库
整个代码分为三部分：
图片部分，这里图片只能是4张，有心的朋友再改良下吧；
精彩活动载入中
CSS样式 这里的CSS可以根据项目需求自定义，不必拘泥于下面的代码，只要弄懂其中的原理就OK了。若你看不懂下面的CSS的话就恶补下吧，在此就不一一讲解了。
JS代码 终于来到重点部分了，这部分的代码不多，一起来看下吧。
//定义$con,$Box,$btns,$i变量，autochange自动播放函数，loop定时器。
var $con = $('#gg'),$Box = $con.find('#ggBox'),$btns = $con.find('#ggBtns'),i = 0,autochange = function () {
i += 1;//计数器+1
if (i === 4) { i = 0; }//如果计数器i等4就把i重置为0.
$btns.find('a:eq(' + i + ')').addClass('ggOn').siblings().removeClass('ggOn');
//找到TAB按钮中的第i个a<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>，为其<a href="https://www.jb51.cc/tag/jiashang/" target="_blank" class="keywords">加上</a>ggOn的样式，同时移除所有同级的a<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>ggOn样式
var curr = $<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>.find('a:eq(' + i + ')'),prev = curr.siblings();
//定义curr变量，并赋值为$<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>中当前<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a><a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的a<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>，定义prev变量，赋值为$<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>中除了当前<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a><a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的A<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>外的所有A<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>。
prev.css('z-index',2);//$<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>中除了当前<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a><a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的A<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>外的所有A<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>的index值变为2，即向下移一层
curr.css('z-index',3).animate({ //$<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>中当前<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a><a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的a<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>index值变为3，即向上移一层，然后使用jquery动画以150毫秒把透明度变为1，之<a href="https://www.jb51.cc/tag/houzhixing/" target="_blank" class="keywords">后执行</a>匿名<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>function。
'opacity': 1
},150,function () { //$<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>中除了当前<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a><a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的A<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>外的所有A<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</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,调用切换函数。
图片轮播的全部关键性代码，希望大家仔细研究，教程中仍存在许多不足，希望大家予以改进。
原文链接：https://www.f2er.com/jquery/51506.html