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 相关文章推荐
用jQuery简化JavaScript开发分析
Feb 19 Javascript
js 手机号码合法性验证代码集合
Sep 29 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
详解vue在项目中使用百度地图
Mar 26 Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
js仿淘宝放大镜效果
Dec 28 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实现网站插件机制的方法
2009/11/10 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
script标签属性用type还是language
2015/01/21 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
使用Python函数进行模块化的实现
2019/11/15 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
python的json包位置及用法总结
2020/06/21 Python
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
优秀学生干部个人的自我评价
2013/10/04 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
初中中等生评语
2014/12/29 职场文书
车队安全员岗位职责
2015/02/15 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS