jQuery实现宽屏图片轮播实例教程


Posted in Javascript onNovember 24, 2015

本文实例讲述了jQuery实现宽屏图片轮播实例教程。分享给大家供大家参考。具体如下:
运行效果截图如下:

jQuery实现宽屏图片轮播实例教程

引入jquery库

<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>

构建html
整个代码分为三部分:

1、加载部分loadding ;

2、图片部分,这里图片只能是4张,有心的朋友再改良下吧;

3、TAB按钮部分,当然这里也只能是4个按钮,也需要改进。

<div class="gg" id="gg">
      <div class="ggLoading">
        <div class="ggLoading2"><em>精彩活动载入中</em></div>
      </div>
      <div class="ggs">
        <div class="ggBox" id="ggBox">
          <a href="#" title="5月22日测试开启领报名资格" style="z-index: 3; opacity: 4;">
            <img src="images/1.jpg" alt="" /></a>
          <a href="#" title="首测世界的雕琢篇章开启">
            <img src="images/2.jpg" alt="" /></a>
          <a href="#" title="上古世纪游戏资料手册">
            <img src="images/3.jpg" alt="" /></a>
          <a href="#" title="游戏四大特色揭晓">
            <img src="images/4.jpg" alt="" /></a>
        </div>
      </div>
      <div class="ggb">
        <div class="ggBtns" id="ggBtns">
          <a title="5月22日测试开启领报名资格" href='javascript:void(0)' class="ggOn"><em>5月22日测试开启领报名资格</em></a>
          <a title="首测世界的雕琢篇章开启" href='javascript:void(0)'><em>首测世界的雕琢篇章开启</em></a>
          <a title="上古世纪游戏资料手册" href='javascript:void(0)'><em>上古世纪游戏资料手册</em></a>
          <a title="游戏四大特色揭晓" href='javascript:void(0)'><em>游戏四大特色揭晓</em></a>
        </div>
      </div>
    </div>

CSS样式
这里的CSS可以根据项目需求自定义,不必拘泥于下面的代码,只要弄懂其中的原理就OK了。若你看不懂下面的CSS的话就恶补下吧,在此就不一一讲解了。

.ggLoading, .ggLoading2 {
  background-image: url(../images/nav.png);
}
.gg {
  width: 100%;
  height: 500px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin: 0 auto;
  background: #d3d3d3 url(../images/loading.jpg) repeat-x;
}
.ggLoading {
  position: absolute;
  left: 40%;
  top: 200px;
  width: 325px;
  text-align: center;
  height: 56px;
  background-position: 0 -274px;
  background-repeat: no-repeat;
  line-height: 56px;
  color: #9c9c9c;
}
.ggLoading2 {
  width: 330px;
  height: 56px;
  background-position: 213px -330px;
  background-repeat: no-repeat;
}
.ggLoading em {
  font-weight: bold;
}
.ggs {
  width: 200%;
  height: 500px;
  left: -50%;
  top: 0;
  position: absolute;
}
.ggBox {
  width: 1920px;
  height: 500px;
  margin: 0 auto;
}
.ggBox a {
  display: block;
  width: 1920px;
  height: 500px;
  position: absolute;
  z-index: 1;
  opacity: 0.1;
}
.ggBox img {
  display: block;
  width: 1920px;
  height: 500px;
}
.ggb {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 40px;
  z-index: 4;
  background-color: #32342e;
  background-repeat: repeat-x;
  background-position: 50% -40px;
}
.ggBtns {
  width: 960px;
  height: 40px;
  margin: 0 auto;
  border-left: 1px solid #090908;
  border-right: 1px solid #6a6a60;
}
.ggBtns a {
  float: left;
  display: block;
  width: 240px;
  height: 40px;
  text-align: center;
  padding-top: 10px;
  color: #848380;
  font-size: 14px;
  line-height: 40px;
  background-position: 0 10px;
  position: relative;
  top: -10px;
  outline: none;
  background-repeat: no-repeat;
  cursor: pointer;
}
.ggBtns a em {
  display: block;
  width: 210px;
  height: 40px;
  margin: 0 auto;
  overflow: hidden;
}
.ggBtns a:hover {
  color: #e7e7e7;
}
.ggBtns a:focus {
  outline: none;
}
.ggBtns a.ggOn {
  color: #e7e7e7;
  background-position: 0 0;
}
.ggb, .ggBtns a {
  background-image: url(../images/main.jpg);
}
a.ggOn {
  background-image: url(../images/gg.png);
}

JS代码
终于来到重点部分了,这部分的代码不多,一起来看下吧。

$(function () {//文档加载后执行
   
  //定义$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标签,为其加上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,调用切换函数。

以上就是jquery实现图片轮播的全部关键性代码,希望大家仔细研究,教程中仍存在许多不足,希望大家予以改进。

Javascript 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
输入框过滤非数字的js代码
Sep 18 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 #Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 #Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 #Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 #Javascript
基于jquery实现简单的手风琴特效
Nov 24 #Javascript
jQuery插件实现无缝滚动特效
Nov 24 #Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 #Javascript
You might like
php IP及IP段进行访问限制的代码
2008/12/17 PHP
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
9个比较实用的php代码片段
2016/03/15 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
vue生命周期实例小结
2018/08/15 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
Python脚本实现代码行数统计代码分享
2015/03/10 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
Django组件cookie与session的具体使用
2019/06/05 Python
详解Python的三种拷贝方式
2020/02/11 Python
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
元旦文艺汇演主持词
2014/03/26 职场文书
国旗下演讲稿
2014/05/08 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
介绍信如何写
2015/01/31 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
教师求职信怎么写
2015/03/20 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书