宽屏图片轮播html,jQuery实现宽屏图片轮播实例教程
本文实例讲述了jQuery实现宽屏图片轮播实例教程。分享给大家供大家参考。具体如下:
运行效果截图如下:
引入jquery库
构建html
整个代码分为三部分:
1、加载部分loadding ;
2、图片部分,这里图片只能是4张,有心的朋友再改良下吧;
3、TAB按钮部分,当然这里也只能是4个按钮,也需要改进。
5月22日测试开启领报名资格
首测世界的雕琢篇章开启
上古世纪游戏资料手册
游戏四大特色揭晓
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实现图片轮播的全部关键性代码,希望大家仔细研究,教程中仍存在许多不足,希望大家予以改进。
宽屏图片轮播html,jQuery实现宽屏图片轮播实例教程相关推荐
- php flash 图片上传,php+jquery+ajax无刷新图片上传裁切,模拟flash头像上传实例
这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的.用的还不熟练,所以今天就用ajax做一个图片上传裁切的实例.个人感觉还不错,现在就分享出来. ...
- html图片实现左右滑动,jquery实现左右滑动式轮播图
本文实例为大家分享了jquery左右滑动轮播图的具体代码,供大家参考,具体内容如下 图片轮播jq(左右切换) *{margin: 0;padding:0; } ul{list-style: none; ...
- 15款jQuery带缩略图的图片轮播切换特效代码
JQuery宽屏电影大图幻灯片轮播切换代码 jquery带文字缩略图的图片轮播切换代码 jQuery OwlCarousel图片滚动插件世界杯图片轮播滚动代码 jQuery仿中国建设银行带缩略图控制滚 ...
- 基于jQuery可悬停控制图片轮播代码
基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览 源码下载 实现的代码: <!-- 轮播广告 --><div id= ...
- HTML鼠标悬停图片置顶,jquery实现鼠标悬浮停止轮播特效
本文实例讲述了jquery实现鼠标悬浮停止轮播特效代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: 一.主体程序 轮播图①(手动点击轮播) 1 2 3 4 二.CSS样式 * ...
- html 图片放大缩小轮播,jQuery左右滚动支持图片放大缩略图图片轮播代码分享
本文实例讲述了jQuery左右滚动支持图片放大缩略图图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的左右滚动支持图片放大缩略图图片轮播效果,常用的jQuery图片左右轮播 ...
- HTML圆形立体感轮播图,jQuery超酷响应式圆形图片轮播图特效
mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件.该轮播图特效可以将图片以圆形图片显示,然后使图片无限循环形成轮播图或旋转木马特效.该轮播图插件的特点有: 使用简单 在同一个 ...
- html幻灯片图片轮播w3,支持30+种类型幻灯片|轮播图|旋转木马的强大jQuery插件
jssor slider是一款功能非常强大的可制作超过30种不同类型的幻灯片|轮播图|旋转木马的jQuery插件.jssor具有高性能,轻量级,跨浏览器等特点,它可以支持IE6+的浏览器,并且可以支持 ...
- html全屏banner轮播代码,基于jquery实现全屏banner自动轮播切换
特效描述:基于jquery实现 全屏banner 自动轮播切换.基于jquery实现全屏banner自动轮播切换 代码结构 1. 引入JS 2. HTML代码 *{margin:0;padding:0 ...
最新文章
- ubuntu 64上的GCC如何编译32位程序
- 2015《大数据》读者意见征集活动——幸运读者名单
- stream 上传插件 java_stream: 流式(包含断点续传)上传文件,包括前端和java后台...
- weblogic启动项目失败查看_weblogic启动报错常见错误解决办法
- mysql格式化11位时间戳_格式化MYSQL时间戳函数FROM_UNIXTIME
- linux系统自行清理归档日志_Linux下自动删除归档日志文件的方法
- 从大厂出来后,我工资翻了一翻
- 邻接矩阵的COO格式
- 10246 - Asterix and Obelix
- 如何快速比对表格数据
- 操作系统简述复习笔记
- ff14服务器显示位置,ff14服务器
- 数据处理方法-算术编码(香农算法、java编码实现)
- 问题 E: 1.10 旅行时间 根据火车的出发时间和到达时间,编写程序计算整个旅途所用的时间。
- 3种侧链压缩方法让音乐鼓点更有力—FL Studio教程
- 《洋妞》万像电影节揽四奖 或打造同名综艺节目
- javafx.util.Pair 不支持反序列化
- OpenFOAM 中的 RTS 机制
- 2022年NOC软件创意编程(学而思)决赛小学低年级组scratch
- 【微课制作软件】Focusky教程 | 为什么 Focusky里的内容布局编辑不了?
热门文章
- OpenCV矩阵可视化工具包
- YUV 4:2:0 格式和YUV411格式区别
- Apache与Nginx网络模型
- 论文笔记:MTCNN
- 计算机配置选项在哪,电脑启动项目设置在哪
- linux apache 负载均衡,使用Apache作为前端负载均衡器
- linux系统修改bond的ip,Linux下快速设定ip bond,linux设定ipbond
- python 指针_指针篇 | 指针的灵活让我想起了Python
- pfSense book之 Open***站点到站点连接示例(共享密钥)
- [Linux实用工具]munin-node插件配置和插件编写