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 相关文章推荐
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
Jun 29 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
js实现星星打分效果的方法
Jul 05 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 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
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
综合实践活动方案
2014/02/14 职场文书
计算机专业求职信
2014/06/02 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
2014企业年终工作总结
2014/12/23 职场文书
金陵十三钗观后感
2015/06/04 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python