jQuery宽屏图片旋转示例教程

本文描述了一个jQuery实现宽屏图片轮播的示例教程。分享给大家参考。具体如下：运行效果截图如下：

介绍jquery库。

script src=' http : js/jquery-1 . 9 . 1 . min . js ' type=' text/JavaScript '/script构建html的整个代码分为三个部分：

1.装载部分装载；

2.图片部分，这里只有4张图片，有心的朋友可以再完善一下。

3.TAB按钮，当然这里只有四个按钮，这也需要改进。

div=' gg ' id=' gg ' div class=' gg loading ' div class=' gg loading 2 ' em激动人心的活动正在加载/em/div/div class=' ggs ' div class=' gg box ' id=' gg box ' a href=' # ' title=' 5月22日，考试开放报名。opa city 3360；4 'img src=' http 3360 images/1 . jpg ' alt=' '//a href=' # ' title='开启第一个测试世界的雕刻篇章' img src=' http 3360 images/2 . jpg ' alt=' '//a href=' #。Title='上古世纪游戏信息手册' img src=' http : Images/3 . jpg ' alt=' '//a href=' # ' title='游戏四大特色揭晓' img src=' http 3360 Images/4 . jpg ' alt=' '//a/Div/Div class=' ggb ' Div class=' ggb tns ' id=' ggb tns ' a title=' 5月22日，测试和开放报名资格' href=' JavaScript 3360 测试和开放注册资格/em/A title='开启第一个测试世界的刻章' href=' javascript3360 void (0)'开启第一个测试世界的刻章/em/A title='古代世纪游戏数据手册' href=' JavaScript 3360 void(0)' e古代世纪游戏数据手册/em/A title='游戏的四大特性被揭示' href=' JavaScript 3360 void(0)' em游戏的四大特性被揭示/em/a /div /div /divCSS这里的样式可以根据项目需求进行定制，所以你不用拘泥于下面的代码，只要你理解了原理，你就OK了。 如果你看不懂下面的CSS，那就补上，这里我就不一一解释了。标记、标记2 {背景-图像：网址(./图像/导航。巴布亚新几内亚)；}.gg {宽度： 100%；高度： 500像素；相对位置：z-index : 1；飞越：隐藏；margin: 0自动背景： #d3d3d3 url(./图像/加载。jpg)repeat-x；}.格洛丁{位置：绝对值；左： 40%;top: 200px宽度： 325像素；文本对齐：中心；高度： 56px背景-位置： 0-274像素；背景-重复：不重复；线高： 56px颜色： # 9c 9 c9c} .波形2 {宽度： 330 px高度： 56px背景-位置： 213 px-330 px；背景-重复：不重复；}.ggLoading em { font-weight : bold；}.ggs {宽度： 200%；高度： 500像素；左侧：-50%;top : 0；绝对位置：}.ggBox {宽度： 1920px高度： 500像素；margin: 0 auto}。ggBox a { display:块；宽度： 1920像素；高度： 500像素；绝对位置：z-index : 1；opacity: 0.1 }。ggBox img { display:块；宽度： 1920像素；高度： 500像素；}.ggb {位置：绝对值；宽度： 100%;左： 0；底部： 0；高度： 40pxz-index : 4；背景色： # 32342 e；背景-重复：次重复-x；背景-位置： 50%-40px；}.ggBtns { width: 960px高度： 40pxmargin: 0自动边框-左侧： 1px实心# 090908;右边框： 1px实心# 6a 6a 60}.ggb tns a { float : left display :块；宽度： 240像素；高度： 40px文本对齐：中心；衬垫-top : 10px；color : # 848380 font-size : 14px；线高： 40px背景-位置0 10px相对位置：top :-10px；大纲：无；背景-重复：不重复；光标：指针；}.ggBtns a em { display:块；宽度： 210 px高度： 40pxmargin: 0自动飞越：隐藏；}.ggb tns a :悬停{ color : # e7e 7；}.ggb tns a :焦点{轮廓ne :无；}.ggb tns a . ggon { color : # e7e 7e 7；背景-位置： 0 0;}.ggb .背景图片网址(./images/mainjpg)；} a . ggon { background-image : URL(./images/gg。巴布亚新几内亚)；}JS代码终于来到重点部分了，这部分的代码不多，一起来看下吧。

$(function () {//加载文档后，执行//define $con、$box、$btns、$i变量、autoChange自动播放函数和循环计时器。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 ')。兄弟姐妹()。remove class(' ggon ')；//在TAB按钮中找到ith A标签，添加ggOn样式，去掉所有同级别的A标签。ggOn style var curr=$ box . find(' a : eq(' I ')')，prev=curr .姐弟()；//定义curr变量并赋给$box当前显示图片的A标签，定义prev变量并赋给$box当前显示图片的A标签以外的所有A标签。prev.css('z-index '，2)；//$box，当前显示图片除A标签外的所有A标签的索引值都变成2，即curr.css ('z-index '，3)。animate ({//$ box，当前显示图片的A标签的索引值变为3，即上移一层，然后使用jquery animation在150毫秒内将透明度更改为1，然后执行匿名函数。在'不透明度' : 1}，150，function () {//$ box中，当前显示图片除A标签外的所有A标签的索引值变为1，透明度变为0.1 reve . CSS({ ' z-index ' 3360 1，'不透明度' : 0 0.1 })；});}，loop=setInterval(autoChange，5000)；//定义定时器，每5秒执行一次autoChange功能，达到自动播放效果。$con.hover(function () {//定义鼠标悬停和离开事件clearInterval(循环)；//鼠标悬停时移除Loog定时器，即停止播放}，function(){ loop=set interval(autochange，5000)；//鼠标离开时加载Loog定时器并继续播放})；$ btns.find ('a ')。click (function () {//define tab按钮事件i=$(this)。index()-1；//tab键中当前a标记的索引值为-1，赋给I计数器autoChange()；//调用切换方法切换图片})；});看了上面的评论你知道原理吗？实际上，整个代码分为四个部分：1。图片切换用I作为计数器，显示当前为I的图片，其他图片全部隐藏，给当前为I的按钮增加ggOn样式，其他按钮去掉ggOn样式，每次调用切换功能我都会增加1。2.Autoplay定义了一个定时器循环，每5秒调用一次切换功能。3.鼠标悬停事件意味着当鼠标挂起时循环计时器被清除，当鼠标离开时循环计时器被加载。4.按钮事件绑定选项卡按钮Click事件，点击后给I赋值当前选项卡按钮的索引值-1，调用切换函数。

以上就是jquery实现照片轮播的所有关键代码。我希望你能仔细研究一下。教程还有很多不足，希望大家改进。