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 简便实现页面元素数据验证功能
Mar 24 Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
Oct 08 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 Javascript
vue实现简单表格组件实例详解
Apr 16 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 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
openflashchart 2.0 简单案例php版
2012/05/21 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
php格式化时间戳
2016/12/17 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
利用js实现简易红绿灯
2020/10/15 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
使用python实现对元素的长截图功能
2019/11/14 Python
python读写文件write和flush的实现方式
2020/02/21 Python
进程的查看和调度分别使用什么命令
2015/03/25 面试题
绿化先进工作者事迹材料
2014/01/30 职场文书
学校消防演习方案
2014/02/19 职场文书
《长征》教学反思
2014/04/27 职场文书
公务员政审个人总结
2015/02/12 职场文书
西游降魔篇观后感
2015/06/15 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript