以下是前一篇文章【Youtube影片匯整網站範本,免費下載】中的網頁模版(index.html)原始碼,在這邊利用一些篇幅簡單說明一下,讓正在學習Javascript以及jQuery的初學者們可以參考。

  如果您對於內容沒有興趣,可以直接拿去使用,並且把其中第12行到第40行使用陣列的方式來儲存要被顯示的Youtube影片標題和ID的地方,改成為自己的影片列表就可以了。如果我們只有這一個網頁要使用這些影片,那麼使用陣列的方式是最方便的。如果你的影片列表可能要被拿來使用在許多不同的檔案中(例如接下來我們要介紹的另外再建立行動電話專用網頁,也會使用到同樣的影片列表)的話,那麼這些影片列表則比較適合於利用JSON格式另外儲存成檔案,然後再透過AJAX來讀取使用,我們在後來的文章中會再加以說明。

  此外,如果你是自己要另外建立自己的網站的話,那麼第55-64行、第88-96行以及第114-123行等三段程式碼是何老師自己的GoogleAdsense廣告單元,你可以使用自己的廣告單元取代,或是以同樣大小的區塊來放置你的網頁內容,以保持網頁排版的正確性。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="main.css">
	<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
	<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
	<script type="text/javascript">
	// 以下為本網站左上角的名稱
	var webtitle = "賀寶芙影片集";
	// 以下為影片列表,前8支影片會被放在功能表列
	var videolist = [
          				["創辦人","fV5LwQdU59o"],
          				["執行長","lWcWeIauOYw"],
            			["科學團隊","NGAUIfpGJBU"],
						["品質保證", "y-Pg_hulbAU"],
						["三立新聞專訪產品製造","SEiNQ9YzXTU"],
						["賀寶芙公司簡介","-PYtMybgFNE"],
						["賀寶芙微早餐","q-B195NCJxs"],
            			["美味奶昔","CeuiMTjVKQM"],
          				["超模代言廣告","h7bk4BHTx9U"],
          				["超模代言廣告花絮","6ce3HEYPz-I"],
          				["足球巨星C羅代言廣告","sLCbhjfXw14"],
          				["足球巨星C羅代言花絮","1ojnlFMWhOo"],
          				["心血管健康的重要性","defEqmJrHbs"],
            			["快餐與營養餐","M7LQHKoLDrQ"],
            			["名人(梁文音)","q9goszwwN5w"],
   					    ["名人(黑人)","_pU5rHVFWiQ"],
   					    ["奶昔製作教學","JGbw90qM0Us"],
   					    ["正確選擇碳水化合物", "3XA2wUv7QH4"],
   					    ["消化道健康", "OGCgwYXYOVg"],
   					    ["腸胃道保健", "qthbDvGkAxs"],
            			["蛋白質和體重管理","K8AKWGcdjis"],
            			["蛋白質的力量","xhBo06DSNnA"],
            			["夜寧新介紹","VxPr4iHczOc"],
            			["均衡營養給您健康活躍人生", "V2Ff_vVrHFU"],
            			["SKIN介紹","p5UOUjW6ysM"],
            			["SKIN用法(韓國版)","Plkd9g9TEsQ"],
            			["各行各業在賀寶芙","RkLbfEKdShE"]
					];

		document.writeln("<title>" + webtitle + "</title>");
	</script>
</head>
<body>
	<div class="maincontent">
		<header class="headbanner">
			<div class="logo">
				<h1>
					<script type="text/javascript">
						document.write(webtitle);
					</script>
				</h1>
			</div>
			<div class="bannerad">
				<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
				<ins class="adsbygoogle"
				     style="display:inline-block;width:728px;height:90px"
				     data-ad-client="ca-pub-9059544252653595"
				     data-ad-slot="9157597630"></ins>
				<script>
				(adsbygoogle = window.adsbygoogle || []).push({});
				</script>
			</div>
		</header>
		<nav>
			<ul class="banner">
				<script type="text/javascript">
				//在這裡顯示第0-7個影片,放在選單列上
					for(var i=0; i<8; i++) {
						var listr = '<li class="videoitem" data-videoid="'
									+ i
									+ '">'
									+ videolist[i][0]
									+ '</li>';
						document.write(listr);
					}
				</script>

			</ul>
		</nav>
		<main>
			<div class="maintube">
				<div class="tube">
					<!-- 這裡放的是第一部影片 -->
					<iframe width="640" height="360" src="//www.youtube.com/embed/N-1igHEZqI4" frameborder="0" allowfullscreen></iframe>
				</div>
				<div class="undertubead">
					<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
					<ins class="adsbygoogle"
					     style="display:inline-block;width:468px;height:60px"
					     data-ad-client="ca-pub-9059544252653595"
					     data-ad-slot="8250664162"></ins>
					<script>
					(adsbygoogle = window.adsbygoogle || []).push({});
					</script>
				</div>
			</div>
		</main>
		<aside>
			<ul>
				<script type="text/javascript">
					//在這邊顯示第8個以後的影片,數量多少由陣列中決定,都顯示在側邊欄
					for(var i=8; i<videolist.length; i++) {
						var listr = '<li class="videoitem" data-videoid="'
									+ i
									+ '">'
									+ videolist[i][0]
									+ '</li>';
						document.write(listr);
					}
				</script>
			</ul>
			<div id="google_ad01">
				<center>
				<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
				<ins class="adsbygoogle"
				     style="display:inline-block;width:336px;height:280px"
				     data-ad-client="ca-pub-9059544252653595"
				     data-ad-slot="5145569231"></ins>
				<script>
				(adsbygoogle = window.adsbygoogle || []).push({});
				</script>
				</center>
			</div>

		</aside>
		<footer>
			以上影片均取自Youtube,版權均屬於原創者所有~~
		</footer>
	</div>
	<script type="text/javascript">

		$(document).ready(function() {
			$(".videoitem").on("click", function() {
				var videoId = $(this).attr("data-videoid");
				var htmlstr= '<iframe width="640" height="360" src="//www.youtube.com/embed/'
				             + videolist[videoId][1]
				             + '" frameborder="0" allowfullscreen></iframe>';
				$(document).find(".tube").html(htmlstr);

			});
		});
	</script>
</body>
</html>

  在這個網站範本中,我們在功能列上放置了8個連結,這些連結分別連結到了前面8支影片,這段程式碼是寫在68-78行的地方,使用JavaScript的迴圈指令,從陣列中取出資料,建立成<li>的標籤內容。第102-112行則是把剩下的所有影片,另外建立出影片連結的<li>標記,並放在側邊欄中。

  在第86行的地方,放置了網站的第一個影片。這個主要播放影片的地方,是放在類別選擇器.tube中,到時候我們要切換影片的內容時,只要變更.tube中的HTML碼就可以了。

  整個網頁中最重要的程式碼在第132-144之間,我們再把它顯示如下:

	<script type="text/javascript">

		$(document).ready(function() {
			$(".videoitem").on("click", function() {
				var videoId = $(this).attr("data-videoid");
				var htmlstr= '<iframe width="640" height="360" src="//www.youtube.com/embed/'
				             + videolist[videoId][1]
				             + '" frameborder="0" allowfullscreen></iframe>';
				$(document).find(".tube").html(htmlstr);

			});
		});
	</script>

  在這段指令中,我們先透過jQuery的事件監聽來等待.videoitem這個類別被click(滑鼠按下去)的事件發生,當這個事件發生了之後,透過this來找到是哪一個被按到,並且設定好要替換的HTML碼,然後使用find函數找到.tube這個類別,使用html()函數把原有的內容置換掉即可。

  要確定能夠順利排版,這個檔案還要搭配main.css,有興趣的朋友,可以在前一篇文章【Youtube影片匯整網站範本,免費下載】中找到下載的連結點,我們就不再此多加說明。

(562)

%d 位部落客按了讚: