【三石jQuery视频教程】01.图片循环展现

时间  2019-11-20
标签 三石jQuery视频教程 图片 循环 展现 栏目 JQuery 繁體版
原文   原文链接

视频地址：http://v.qq.com/page/e/5/t/e0149n5he5t.htmljavascript

 

你们好，欢迎来到【三石jQuery视频教程】，我是您的老朋友 - 三生石上。css

今天，咱们要经过基本的HTML、CSS和jQuery来实现一个超级简单的图片循环展现效果，先来看下最终的产品：html

 

Step1：网站目录

网站目录很是简单，包含三部分：lesson1.html文件、lib目录和images目录。java

其中 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 的超连接。缓存

  1. 使用超连接的 class 属性来标记哪些图片用于大图展现
  2. 使用超连接的 href 属性记录须要展现的大图地址
  3. 超连接的内容则是页面上显示的缩略图
<!DOCTYPE html>
<html>
<head>
    <title>图片循环展现 - 三石jQuery视频教程</title>
</head>
<body>
    <div id="main">
        <h2>
            图片循环展现 - 三石jQuery视频教程
        </h2>
        <a class="showit" href="images/1.jpg">
            <img src="images/small/1.jpg">
        </a>
        <a class="showit" href="images/2.jpg">
            <img src="images/small/2.jpg">
        </a>
        <a class="showit" href="images/3.jpg">
            <img src="images/small/3.jpg">
        </a>
        <a class="showit" href="images/4.jpg">
            <img src="images/small/4.jpg">
        </a>
        <a class="showit" href="images/5.jpg">
            <img src="images/small/5.jpg">
        </a>
        <a class="showit" href="images/6.jpg">
            <img src="images/small/6.jpg">
        </a>
    </div>
</body>
</html>

　　

 

 

Step3：CSS样式

下面咱们来建立基本的 CSS 样式，让这个默认显示看起来更加专业和美观，咱们所作的努力包含：微信

  1. 页面背景设为很是浅的灰色（#efefef）
  2. 主体内容加上了边框和白色背景
  3. 主体内容居中（margin-left 和 margin-right 设为 auto）
  4. 去掉了超连接的下划线
<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>

　　

此时的页面显示效果：app

 

Step4：显示大图

下面是 jQuery 出场的时候了，首页在页面底部引入 jQuery 库。less

注：把页面上全部 JavaScript 脚本放在页面底部是推荐的作法，这样可让页面的基本HTML结构更快的显示出来。

基本的逻辑：

  • 用户点击了 class=showit 的超连接
    • 判断 id=showbox 的大图节点是否存在
      • 若是不存在，则建立大图节点并添加到 document.body 中
    • 找到大图节点内部的 img 标签，并将其 src 属性设置为所点击超连接的 href 属性
    • 阻止超连接的默认行为 event.preventDefault()

来看下相应的实现代码：

<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样式

在没有为大图建立样式时，大图是紧挨着页面主体结构显示的，下面为其建立样式：

  1. #showbox 绝对定位，宽度和高度设为 100%，使其填充整个页面
  2. 设置 #showbox 中的内容居中显示
  3. 为大图设置隐藏和圆角，使其更美观
#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：点击大图的左右部分

如今咱们要实现点击图片的右半部分，能够导航到下一张图片；相反，若是点击大图的左半部分，则导航到上一张图片。 

为了实现这个效果，咱们须要知道当前点击的是图片的哪半部分。来看下实现这一功能须要了解的知识：

  1. 当前点击的元素 event.target
  2. 元素左上角偏离当前文档左上角的位置，使用 jQuery 提供的 offset 函数
  3. 元素的宽度（包含 padding + border），使用 outerWidth 函数
  4. 当前点击的位置在 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();
		}
	
	});

});

　　

源码和视频下载

 三石出品，必属精品！

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程