之前的文章，由于在博文的底部放有微信公众号的缘故，被管理员判定为：
您好，您的这篇博文内容本身没什么问题，但是，在博文底部存在推广信息内容。。。。
你们也没告知到底是哪条触犯了博客园的规矩，我就把底部信息全部删除，这样总行了吧。
视频地址：http://v.qq.com/page/e/5/t/e0149n5he5t.html
大家好，欢迎来到【三石jQuery视频教程】，我是您的老朋友 - 三生石上。
今天，我们要通过基本的HTML、CSS和jQuery来实现一个超级简单的图片循环展示效果，先来看下最终的产品：
Step1：网站目录
网站目录非常简单，包含三部分：lesson1.html文件、lib目录和images目录。
其中 lesson1.html 包含了一个页面最基本的组成部分，正确的设置 DOCTYPE 有助于页面在现代浏览器中正确渲染。
<!DOCTYPE html>
<html>
<head>
<title>图片循环展示 - 三石jQuery视频教程</title> </head>
<body> </body>
</html>
lib目录仅包含了最新的 jQuery 库；images目录包含了 6 张大图和相应的 6 张小图（小图放在 images/small 子目录中）。
Step2：页面结构
为页面添加基本的 html 标签，包含 id=main 的内容块，以及 class=showit 的超链接。
- 使用超链接的 class 属性来标记哪些图片用于大图展示
- 使用超链接的 href 属性记录需要展示的大图地址
- 超链接的内容则是页面上显示的缩略图
<!DOCTYPE html>
<html>
<head>
<title>图片循环展示 - 三石jQuery视频教程</title>
</head>
<body>
<div id="main">
<h2>
图片循环展示 - 三石jQuery视频教程
</h2>
<a class="showit" href="images/1.jpg">
<img src="data:images/small/1.jpg">
</a>
<a class="showit" href="images/2.jpg">
<img src="data:images/small/2.jpg">
</a>
<a class="showit" href="images/3.jpg">
<img src="data:images/small/3.jpg">
</a>
<a class="showit" href="images/4.jpg">
<img src="data:images/small/4.jpg">
</a>
<a class="showit" href="images/5.jpg">
<img src="data:images/small/5.jpg">
</a>
<a class="showit" href="images/6.jpg">
<img src="data:images/small/6.jpg">
</a>
</div>
</body>
</html>
Step3：CSS样式
下面我们来创建基本的 CSS 样式，让这个默认显示看起来更加专业和美观，我们所做的努力包含：
- 页面背景设为非常浅的灰色（#efefef）
- 主体内容加上了边框和白色背景
- 主体内容居中（margin-left 和 margin-right 设为 auto）
- 去掉了超链接的下划线
<style>
body{
background-color: #efefef;
} #main {
border: solid 1px #ccc;
background-color: #fff;
max-width: 500px;
padding: 20px;
margin: 20px auto;
} .showit {
text-decoration: none;
}
</style>
此时的页面显示效果：
Step4：显示大图
下面是 jQuery 出场的时候了，首页在页面底部引入 jQuery 库。
注：把页面上所有 JavaScript 脚本放在页面底部是推荐的做法，这样可以让页面的基本HTML结构更快的显示出来。
基本的逻辑：
- 用户点击了 class=showit 的超链接
- 判断 id=showbox 的大图节点是否存在
- 如果不存在，则创建大图节点并添加到 document.body 中
- 找到大图节点内部的 img 标签，并将其 src 属性设置为所点击超链接的 href 属性
- 阻止超链接的默认行为 event.preventDefault()
- 判断 id=showbox 的大图节点是否存在
来看下相应的实现代码：
<script>
$(function() { $('.showit').click(function(event) { var largeImageUrl = $(this).attr('href'); var boxEl = $('#showbox');
if(!boxEl.length) { boxEl = $('<div>', {
id: 'showbox',
html: '<img/>'
}).appendTo(document.body); } boxEl.find('img').attr('src', largeImageUrl);
boxEl.show(); event.preventDefault(); });
</script>
此时，点击页面上的缩略图，显示效果如下：
Step5：大图的CSS样式
在没有为大图创建样式时，大图是紧挨着页面主体结构显示的，下面为其创建样式：
- #showbox 绝对定位，宽度和高度设为 100%，使其填充整个页面
- 设置 #showbox 中的内容居中显示
- 为大图设置隐藏和圆角，使其更美观
#showbox {
position: absolute;
top: 0;
left: 0;
background-color: #000;
width: 100%;
height: 100%;
text-align: center;
}
#showbox img {
max-width: 500px;
margin-top: 100px;
box-shadow: 0 0 20px #fff;
border-radius: 10px;
}
此时的页面效果：
Step6：点击隐藏大图
页面第一次加载完毕后，#showbox 节点还不存在，只有用户第一次点击页面上的缩略图时才会创建 #showbox。
所以下面的代码是不能正常运行的：
$('#showbox').click(function(event) {
$(this).hide();
});
我们需要使用 jQuery 提供的 on 函数，来注册点击事件，即使在注册事件时节点不存在也一样有效：
$(document.body).on('click', '#showbox', function(event) {
$(this).hide();
});
Step7：点击大图的左右部分
现在我们要实现点击图片的右半部分，可以导航到下一张图片；相反，如果点击大图的左半部分，则导航到上一张图片。
为了实现这个效果，我们需要知道当前点击的是图片的哪半部分。来看下实现这一功能需要了解的知识：
- 当前点击的元素 event.target
- 元素左上角偏离当前文档左上角的位置，使用 jQuery 提供的 offset 函数
- 元素的宽度（包含 padding + border），使用 outerWidth 函数
- 当前点击的位置在 X 轴的坐标 event.pageX
$(document.body).on('click', '#showbox', function(event) {
var targetEl = $(event.target);
if(targetEl.is('img')) {
var imageLeft = targetEl.offset().left;
var imageHalfX = imageLeft + targetEl.outerWidth() / 2;
if(event.pageX > imageHalfX) {
alert('click right part');
} else {
alert('click left part');
}
} else {
$(this).hide();
}
});
Step8：缓存页面上所有的大图
下面就需要知道，相对于当前展示的图片，上一张图片和下一张图片分别是什么？
我们使用两个函数来获取即将展示的图片，从而完整主题的JavaScript代码，如下所示：
$(document.body).on('click', '#showbox', function(event) {
var targetEl = $(event.target);
if(targetEl.is('img')) {
var imageLeft = targetEl.offset().left;
var imageHalfX = imageLeft + targetEl.outerWidth() / 2;
var imageUrl = targetEl.attr('src');
var nextImageUrl;
if(event.pageX > imageHalfX) {
nextImageUrl = getNextImageUrl(imageUrl);
} else {
nextImageUrl = getPrevImageUrl(imageUrl);
}
if(nextImageUrl) {
targetEl.attr('src', nextImageUrl);
}
} else {
$(this).hide();
}
});
为了对页面上所有的图片进行精确定位，我需要一个缓存数组来记录这些图片：
var cachedImageUrls;
然后定义一个函数，来初始化这个数组，为了避免多次初始化，我们进行了非空判断：
function cacheImageUrls() {
if(!cachedImageUrls) {
cachedImageUrls = $('.showit').map(function() {
return $(this).attr('href');
});
}
}
在此，jQuery 的 map 函数为我们提供了很大的便利，map 函数将一个 jQuery 对象映射为数组，函数内的 return 确定了数组中的每一项。
在执行完这个函数后，cachedImageUrls 内数据如下所示：
["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg", "images/6.jpg"]
Step9：获取上一张图片和下一张图片
拿到页面上所有的大图数组后，我们可以很方便的计算出当前图片的上一张或者下一张图片，注意做下数组的边界检查就行了：
function getNextImageUrl(imageUrl) {
cacheImageUrls();
var imageUrlIndex = $.inArray(imageUrl, cachedImageUrls);
if(imageUrlIndex >= 0) {
imageUrlIndex++;
if(imageUrlIndex >= cachedImageUrls.length) {
imageUrlIndex = 0;
}
return cachedImageUrls[imageUrlIndex];
}
}
注：jQuery 提供的 inArray 函数用来查找某项元素在数组中的索引，如果返回值小于零，则数组中不存在此项元素。
Step10：完整的JavaScript代码
最后，来看下完整的 JavaScript 代码：
$(function() {
$('.showit').click(function(event) {
var largeImageUrl = $(this).attr('href');
var boxEl = $('#showbox');
if(!boxEl.length) {
boxEl = $('<div>', {
id: 'showbox',
html: '<img/>'
}).appendTo(document.body);
}
boxEl.find('img').attr('src', largeImageUrl);
boxEl.show();
event.preventDefault();
});
var cachedImageUrls;
function cacheImageUrls() {
if(!cachedImageUrls) {
cachedImageUrls = $('.showit').map(function() {
return $(this).attr('href');
});
}
}
function getNextImageUrl(imageUrl) {
cacheImageUrls();
var imageUrlIndex = $.inArray(imageUrl, cachedImageUrls);
if(imageUrlIndex >= 0) {
imageUrlIndex++;
if(imageUrlIndex >= cachedImageUrls.length) {
imageUrlIndex = 0;
}
return cachedImageUrls[imageUrlIndex];
}
}
function getPrevImageUrl(imageUrl) {
cacheImageUrls();
var imageUrlIndex = $.inArray(imageUrl, cachedImageUrls);
if(imageUrlIndex >= 0) {
imageUrlIndex--;
if(imageUrlIndex < 0) {
imageUrlIndex = cachedImageUrls.length - 1;
}
return cachedImageUrls[imageUrlIndex];
}
}
$(document.body).on('click', '#showbox', function(event) {
var targetEl = $(event.target);
if(targetEl.is('img')) {
var imageLeft = targetEl.offset().left;
var imageHalfX = imageLeft + targetEl.outerWidth() / 2;
var imageUrl = targetEl.attr('src');
var nextImageUrl;
if(event.pageX > imageHalfX) {
nextImageUrl = getNextImageUrl(imageUrl);
} else {
nextImageUrl = getPrevImageUrl(imageUrl);
}
if(nextImageUrl) {
targetEl.attr('src', nextImageUrl);
}
} else {
$(this).hide();
}
});
});
【三石jQuery视频教程】01.图片循环展示_再次重发的更多相关文章
-
【三石jQuery视频教程】01.图片循环展示
视频地址:http://v.qq.com/page/e/5/t/e0149n5he5t.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...
-
【三石jQuery视频教程】03.创建垂直时间表(Timeline)
视频地址:http://v.qq.com/page/g/i/o/g0150rvi6io.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...
-
【三石jQuery视频教程】02.创建 FontAwesome 复选框和单选框
视频地址:http://v.qq.com/page/m/8/c/m0150izlt8c.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...
-
Elastislide - 响应式的图片循环展示效果
Elastislide 是一款非常优秀的响应式 jQuery 图片循环展示(旋转木马)插件,集成了 Touchwipe 插件以支持触屏设备.提供了四种效果:水平图片传送带.垂直图片传送带.固定在屏幕底 ...
-
jQuery UI 实现图片循环显示，常用于网站首页banner广告切换
http://www.runoob.com/try/try.php?filename=jqueryui-example-position-cycler <!doctype html>< ...
-
[JQuery]用InsertAfter实现图片走马灯展示效果
写在前面 最近一个搞美工的朋友让我给他写一个图片轮播的特效. 需求: 图片向左循环滚动. 图片滚动到中间高亮显示,并在下方显示照片人物对应的信息. 鼠标悬停止滚动. 鼠标离开开始滚动. 单击图片,图片 ...
-
【三石视频教程】当FineUIPro遇到ReportViewer
FineUIPro 下个版本(v2.8.0)即将支持 ReportViewer,为此三石特别制作了一期视频教程,供大家参考. 运行效果图: 视频下载:http://pan.baidu.com/s/ ...
-
jQuery图片旋转展示收缩效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
-
一款基于jquery的手风琴图片展示效果
今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
随机推荐
-
使用CSS中的meta实现web定时刷新或跳转的方法
这篇文章主要介绍了使用CSS中的meta实现web定时刷新或跳转的方法,比使用JavaScript脚本实现起来更加简单一些,需要的朋友可以参考下 meta源信息功能之页面定时跳转与刷新 几乎所有的网页 ...
-
JPA和hibernate的关系
实际上,JPA的标准的定制是hibernate作者参与定制的,所以JPA是hibernate的一个总成,可以这么理解
-
mysql cluster 运行的必备条件
1.由于同步复制一共需要4次消息传递,故mysql cluster的数据更新速度比单机mysql要慢.所以mysql cluster要求运行在千兆以上的局域网内,节点可以采用双网卡,节点组之间采用直 ...
-
block 浅析
最近讲了一个关于block的例子 block 可以作为一个参数 进行传递 需要注意的地方是 :block 虽然作为一个参数 但是在函数方法执行的时候 block 是不会在定义它的地方调用 除非你在后边 ...
-
Android Studio：You need to use a Theme.AppCompat theme (or descendant) with this activity. AlertDialog
学习<第一行代码>的时候遇到的问题. Process: com.example.sevenun.littledemo, PID: 2085 java.lang.RuntimeExcepti ...
-
{key}面向对象程序设计-C++ polymorphism 【第十三次上课笔记】
Peronal Link: http://segmentfault.com/a/1190000002464822 这节课讲了本门课程 面向对象程序设计中最为重要的一个部分 - 多态 /******** ...
-
BS架构和CS架构的区别
C/S架构的优缺点: *优点: 1.客户端因为是独立设计,所以可以实现个性化 2.因为客户端是需要进行安装的,可以不需要重复安装和加载 3.因为客户端是独立开发的,所以有能力对客户端进行安全设计 4. ...
-
MT【285】含参数函数绝对值的最大值
(浙江2013高考压轴题)已知$a\in R$,函数$f(x)=x^3-3x^2+3ax-3a+3$(2)当$x\in[0,2]$时,求$|f(x)|$的最大值. 分析:由题意$f^{'}(x)=3x ...
-
FreeSWITCH黑名单功能设置
功能描述:对呼叫的号码进行过滤 步骤: 1.编译mod_blacklist 模块:进入源目录/usr/local/src/freeswitch --> make mod_blacklist-i ...
-
基于 Confluence 6 数据中心的 SAML 单点登录设置 SSL/TLS
请确定 SAML 授权是安全和私有的,你需要在你的应用程序中设置SSL/TLS. 请参考in the application. See Running Confluence Over SSL or H ...