小博老师演示常用JQuery效果 ——图片轮播
2019独角兽企业重金招聘Python工程师标准>>>
[理论知识]
我们在实际开发应用程序的过程中,经常会遇到图片轮播的效果需求,本文小博老师就为大家演示一下,如何使用JQuery框架实现图片轮播的效果。
[步骤解读一]界面布局
首先我们创建一个HTML页面,核心代码如下:
<body>
<div align="center" id="div_document">
<div align="center" id="div_document_content">
<!-- 图片轮播整体布局 -->
<div align="center" id="div_imgPlayer">
<!-- 轮播图片显示部分 -->
<div align="center" id="div_imgPlayer_img">
<!-- 前景显示图片 -->
<img src="data:images/teamsh2.jpg" width="100%" id="img_foreground" />
<!-- /前景显示图片 -->
<!-- 背景预加载图片 -->
<img src="data:images/teamsz2.jpg" width="100%" id="img_background" />
<!-- /背景预加载图片 -->
</div>
<!-- /轮播图片显示部分 -->
<!-- 轮播控件部分 -->
<table id="table_imgPlayer_controller" width="100%" border="0px" cellpadding="2px" cellspacing="2px">
<tr>
<th class="th_imgPlayer_controller">上海漕河泾</th>
<th class="th_imgPlayer_controller">深圳华强北</th>
<th class="th_imgPlayer_controller">南京新街口</th>
<th class="th_imgPlayer_controller">成都航空路</th>
<th class="th_imgPlayer_controller">北京回龙观</th>
<th class="th_imgPlayer_controller">博为峰教研</th>
</tr>
</table>
<!-- /轮播控件部分 -->
</div>
<!-- /图片轮播整体布局 -->
</div>
</div>
</body>
为了美化页面布局,我们添加css样式,核心代码如下:
<style>
body,div,img{margin:0px; border:0px; padding:0px;}
#div_document{width:100%;}
#div_document_content{width:1366px; position:relative;}
#div_imgPlayer{width:1036px; border:1px solid #ddd; padding:5px; margin-top:5px; position:relative;}
#div_imgPlayer_img{width:1024px; position:relative;}
#img_foreground{position:relative; z-index:2;}
#img_background{position:absolute;left:0px; top:0px; z-index:1;}
.th_imgPlayer_controller{ height:30px; border:1px solid #ddd; background-color:#265b99; color:#f6853a; cursor:pointer;}
</style>
使用浏览器访问,看到页面布局效果如下:
[步骤解读二]增加手动轮播效果
接下来小博老师为大家演示,增加手动轮播的效果,当我们点击轮播控件时,图片会按照被点击的控件显示相应图片,核心代码如下:
<script src="script/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
// 定义数组,存放所有轮播图片
var imgs = new Array("images/teamsh2.jpg","images/teamsz2.jpg","images/teamnj2.jpg","images/teamcd2.jpg","images/teambj2.jpg","images/team2.jpg");
// 定义索引,存放当前显示图片的索引
var index = 0;
// 让第一个轮播控件样式变化
$(".th_imgPlayer_controller").first().css({"color":"#265b99","background-color":"#f6853a"});
// 添加轮播控件的点击事件
$(".th_imgPlayer_controller").click(function(){
// 先将所有的轮播控件样式恢复成默认样式
$(".th_imgPlayer_controller").css({"color":"#f6853a","background-color":"#265b99"});
// 改变当前被点击的轮播控件的样式
$(this).css({"color":"#265b99","background-color":"#f6853a"});
// 停止正在播放的动画
$("#img_foreground").stop(true,true);
// 获取当前被点击的轮播控件的索引
index = $(".th_imgPlayer_controller").index( $(this) );
// 改变背景预加载图片的src
$("#img_background").attr("src",imgs[index]);
// 前景显示图片逐渐消失,用户看见背景预加载图片
$("#img_foreground").fadeOut(1000,function(){
// 改变前景显示图片的src
$(this).attr("src",imgs[index]);
// 将前景显示图片重新显示出来
$(this).fadeIn();
});
});
});
</script>
通过浏览器访问,现在我们点击轮播控件后,就会显示相应的图片了:
[步骤解读三]增加自动轮播效果
接下来小博老师为大家演示下,添加自动轮播的效果,用户不点击轮播控件时,图片会依次按顺序切换,增加javascript核心代码如下:
// 定义图片自动轮播的函数
function auto(){
// 改变当前要显示的轮播图片的索引
index = ++index >= imgs.length?0:index;
// 先将所有的轮播控件样式恢复成默认样式
$(".th_imgPlayer_controller").css({"color":"#f6853a","background-color":"#265b99"});
// 改变当前要显示的轮播图片对应的轮播控件的样式
$(".th_imgPlayer_controller").eq(index).css({"color":"#265b99","background-color":"#f6853a"});
// 停止正在播放的动画
$("#img_foreground").stop(true,true);
// 改变背景预加载图片的src
$("#img_background").attr("src",imgs[index]);
// 前景显示图片逐渐消失,用户看见背景预加载图片
$("#img_foreground").fadeOut(1000,function(){
// 改变前景显示图片的src
$(this).attr("src",imgs[index]);
// 将前景显示图片重新显示出来
$(this).fadeIn();
});
}
// 定义计时器
var timer = window.setInterval(auto,5000);
// 鼠标进入轮播界面时,暂停自动轮播;鼠标离开轮播界面时,恢复自动轮播
$("#div_imgPlayer").hover(function(){
window.clearInterval(timer);
},function(){
timer = window.setInterval(auto,5000);
});
转载于:https://my.oschina.net/u/2971691/blog/788549
小博老师演示常用JQuery效果 ——图片轮播相关推荐
- PgwSlideshow-基于Jquery的图片轮播插件
友情链接:http://www.htmleaf.com/Demo/201504031619.html http://www.htmleaf.com/Demo/201504191708.html 0 ...
- html5+自动播放轮播插件,15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
- 利用jQuery实现图片轮播
利用jQuery实现图片轮播 需求 实现步骤 一.获取相关对象 二.设置切换按钮 三.设置图片首尾相接效果 四.随图片切换更新小圆点 五.点击小圆点切换图片 六.鼠标无操作时图片自动轮播 示例 需求 ...
- html5图片轮播在线制作教程,15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
- jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
- jquery:手风琴图片轮播
jquery:手风琴图片轮播 html部分: <!DOCTYPE html> <html> <head lang="en"><meta c ...
- 使用jQuery实现图片轮播与切换功能
使用jQuery实现图片轮播与切换功能 文章目录 使用jQuery实现图片轮播与切换功能 效果图 一.body 二.jQuery 三.css 四.小结 效果图 一.body <body>& ...
- jQuery实现图片轮播效果
图片轮播效果 : 在页面的指定位置实现的图片自动的左右轮流切换展示,效果为无缝连接; 点击图片左下的标签(或中间的小圆点)切换到对应的图片; 点击图片的左右切换标签; 整体思路 : 自动轮播: 将一个 ...
- jquery实现jQuery实现图片轮播效果,jQuery实现焦点新闻
在写这篇文章之前,xxx已经写过了几篇关于改jquery实现主题的文章,想要了解的朋友可以去翻一下之前的文章 效果图: 实现代码: 每日一道理 爱,有的时候不需要山盟海誓的承诺,但她一定需要细致入微的 ...
最新文章
- HDU1285拓扑排序模版题
- 转--发布js支持Firefox的加入收藏代码
- python图形绘制库turtle中文开发文档及示例大全【最详细、连结果图都有,gif格式的!】
- 单纯形法求最小值的检验数_【运筹学】单纯形法(笔记和思考)
- linux安装mysql5.5.52,Linux系统上安装MySQL 5.5prm
- linux服务器组件有哪些,推荐几个linux服务器面板
- 11.22Daily Scrum(2)
- python 数据库模块_MySQl 数据库 之 python模块 pymysql 简单介绍
- spring-boot 整合redis作为数据缓存
- iOS 卡顿原因及优化思路
- SOA 快速指南 1 2 3(转IBM developerWorks 中国) 4
- 2016 年 50 个最佳的轻量级 JavaScript 框架和库一
- 阿里云ECS服务器部署,nginx+node+git
- angular设置路由实现无刷新跳转
- Hibernate对象状态
- 用photoshop拼接一个七巧板图案
- 31个爱情原则让你受用终生
- 高防CDN对于网站、平台有着至关重要作用?
- Momenta Mpilot Parking 自主泊车(APA/AVP)方案
- @Value(“${}“) 和 @Value(“#{}“) 的区别
热门文章
- OpenCV实战4: HOG+SVM实现行人检测
- 7-125 切分表达式——写个tokenizer吧 (20 分)
- 3005-基于二叉链表的二叉树最大宽度的计算(附思路,注释,可能错误分析)
- php 语义解析,[扩展推荐] PHP 语义化版本(SemVer)辅助库
- mysql s授权所有用户_批量获取mysql用户权限的方法
- ie com接口 php_PHP webservie连接.net接口
- win2008服务器维护费用,win2008 服务器安全检查步骤指引(日常维护说明)
- cpu消耗 pytorch_高效 PyTorch :如何消除训练瓶颈
- OpenCV——Mat类的创建、复制、函数
- HtmlHelper扩展 及 页面编码化