【三石jQuery視頻教程】01.圖片循環展現_再次重發

時間  2019-11-08
標籤 三石jQuery視頻教程 圖片 循環 展現 再次 重發 欄目 JQuery 简体版
原文   原文鏈接

以前的文章，因爲在博文的底部放有微信公衆號的緣故，被管理員斷定爲：javascript

您好，您的這篇博文內容自己沒什麼問題，可是，在博文底部存在推廣信息內容。。。。
css

大家也沒告知究竟是哪條觸犯了博客園的規矩，我就把底部信息所有刪除，這樣總行了吧。html

 

視頻地址：http://v.qq.com/page/e/5/t/e0149n5he5t.htmljava

 

你們好，歡迎來到【三石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 子目錄中）。　app

 

Step2：頁面結構

爲頁面添加基本的 html 標籤，包含 id=main 的內容塊，以及 class=showit 的超連接。less

  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>

　　

此時的頁面顯示效果：

 

Step4：顯示大圖

下面是 jQuery 出場的時候了，首頁在頁面底部引入 jQuery 庫。

注：把頁面上全部 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教程