javaEE (三）javaweb_JavaScript (2)輪播圖片+彈出廣告

阿新 • • 發佈：2018-12-21

Day：2018/11/13

在網頁上輪圖片和彈出廣告：

在這裡插入圖片描述

原始碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例四的自己的實現</title>
		
	<script>
		function init(){
			// 輪播圖
			setInterval("change()",3000);
			// 廣告圖
			time = setInterval("showAd()",3000);
		}
		var i = 0;
		function change() 
{
			i++;
			document.getElementById("threeimg").src="../img/"+i+".jpg";
			if(i == 3){
			   i = 0;
			}
		}
		
		
		function showAd(){
			
			document.getElementById("sevenImg2").style.display = "block";
			clearInterval(time);
			time = setInterval("hiddenAd()",3000);
		}
		function hiddenAd(){
			document.getElementById 
("sevenImg2").style.display = "none";
		  clearInterval(time);
		}
		
	</script>
	</head>
	<body onload="init()">
		<table border="2px" width="100%" height="100%">
			<!-- 第一行 -->

			<tr>
				<td colspan="2" width="33.33%"><img src="../img/logo2.png" width="50%"/></td> 
				<td colspan="2" 
  width="33.33%"><img src="../img/header.png" ></td>
				<td colspan="3"  width="33.33%"> <a href="#">登陸</a>  <a href="#">註冊</a> <a href="#">購物車</a>  </td>
			</tr>
			<!-- 第二行 -->
			<tr bgcolor="black">
				<td colspan="7"> 
				 <a href="#" ><font size="5" color="red">首頁</font></a>  &nbsp; &nbsp; &nbsp;
				 <a href="#"><font color="red">手機數碼</font></a> 
				 <a href="#">電腦辦公</a> <a href="#">鞋靴箱包</a> 
				 <a href="#">家用電器</a></td>
			</tr>
			<!-- 第三行 -->
			<tr>
				<td colspan="7" ><img src="../img/1.jpg"  width="100%"  id="threeimg"/></td>
			</tr>
			<!-- 第四行 -->
			<tr>
				<td colspan="7"><font size="5" color="red">最新商品 </font>
				<img src="../img/title2.jpg"</td>
			</tr>
			<!-- 第五六行 -->
			<tr>
				<td rowspan="2"><img src="../img/big01.jpg" width="100%"></td>
				<td colspan="3"><img src="../img/middle01.jpg" width="100%" height="100%"  /></td>
				
				<td align="center">
				<img src="../img/small03.jpg" align="center"/> <br />
				<a href="#" ><font color="grey">燉鍋</font></a> <br />
				<font color="red" >$499</font>
		      </td>
				<td><img src="../img/small03.jpg"</td>
				<td><img src="../img/small03.jpg"</td>
			</tr>



			<tr>
				
				<td><img src="../img/small03.jpg"</td>
				<td><img src="../img/small03.jpg"</td>
				<td><img src="../img/small03.jpg"</td>
				<td><img src="../img/small03.jpg"</td>
				<td><img src="../img/small03.jpg"</td>
				<td><img src="../img/small03.jpg"</td>
			</tr>
			<!-- 第七行 -->
			<tr>
				<td colspan="7"><img src="../img/ad.jpg" width="100%" /> 
												<img src="../img/jing.png" width="100%" style="display:none;" id="sevenImg2"</td>
			</tr>
			<!-- 第八行 -->
			<tr>
				<td colspan="7"><font size="5" color="red">熱門商品 </font>
				<img src="../img/title2.jpg"</td>
			</tr>

			<!-- 第九、十行 -->
			<tr>
							<td rowspan="2"><img src="../img/big01.jpg" width="100%"></td>
							<td colspan="3"><img src="../img/middle01.jpg" width="100%" height="100%"  /></td>
							
							<td align="center">
							<img src="../img/small03.jpg" align="center"/> <br />
							<a href="#" ><font color="grey">燉鍋</font></a> <br />
							<font color="red" >$499</font>
					      </td>
							<td><img src="../img/small03.jpg"</td>
							<td><img src="../img/small03.jpg"</td>
						</tr>
			
			
			
						<tr>
							
							<td><img src="../img/small03.jpg"</td>
							<td><img src="../img/small03.jpg"</td>
							<td><img src="../img/small03.jpg"</td>
							<td><img src="../img/small03.jpg"</td>
							<td><img src="../img/small03.jpg"</td>
							<td><img src="../img/small03.jpg"</td>
						</tr>
			<!-- 第十一行 -->
			<tr>
				<td colspan="7"><img src="../img/footer.jpg"  width="100%"/></td>
			</tr>
			<!-- 第十二行 -->
			<tr>
				<td colspan="7" align="center">
				 <a href="#" >關於我們</a> <a href="#">聯絡我們</a> <a href="#">招賢納士</a> <a href="#">法律宣告</a> <a href="#">友情連結</a> <a href="#">支付方式</a> <a href="#" >配送方式</a> <a href="#" >服務宣告</a> <a href="#" >廣告宣告</a> 
				 <p> 南京郵電大學 版權所有</p>
				</td>
			</tr>





		</table>


	</body>
</html>

javaEE (三）javaweb_JavaScript (2)輪播圖片+彈出廣告

Day：2018/11/13 在網頁上輪圖片和彈出廣告：原始碼 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例

javaEE (三）javaweb_JavaScript (1)表單校驗

Date：2018/11/13 1：表單校驗效果圖：在表單中輸入的資訊不符合時候，會彈窗警告。原始碼：  <!-

Boostrap部落格網站搭建（三）-首頁輪播圖實現

1、使用輪播圖外掛這裡我們使用swiper.js外掛並附上下載地址：https://pan.baidu.com/s/1c3MifM4 下面就需要新增HTML程式碼了 <div class="jumbotron container-slider"> &

vue2.x實戰移動端音樂app的better-scroll 使用1.10.0版本遇到的坑設定dot的輪播點和輪播圖片不對應（二）

1.dots的長度//這裡不變 console.log(this.dots)長度為5 _initDots(){ this.dots=new Array(this.children.length) console.log(this.dots)

一個鹹魚的Python爬蟲之路（三）：爬取網頁圖片

you os.path odin 路徑生成存在 parent lose exist 學完Requests庫與Beautifulsoup庫我們今天來實戰一波，爬取網頁圖片。依照現在所學只能爬取圖片在html頁面的而不能爬取由JavaScript生成的圖。所以我找了這個網站

ios輪播圖片用法

javaEE (四）javaweb_JavaScript (4) 改進表格變色：滑鼠進入表格變色

Date：2018/11/17 效果如圖所示，滑鼠進入表格變色，游標離開恢復原始碼：   <!D

關於js物件中兩個函式互相呼叫，其中一個為定時器宣告，定時器迴圈報錯問題（記錄一次嘗試新寫法的報錯經歷）附帶無縫輪播圖程式碼

先上之前的錯誤程式碼吧，注意計時器這個方法（是想把之前寫的的輪播圖演示重構一下） var obj = { sleepTime: 2000,//輪播延時 cont: 0,//第幾張 origin: document.getElementsByClassName('main-

解決BootStrap輪播圖片中圖片大小和父div不一致問題

問題出現其實這個問題相當簡單，自己鼓搗好久，才發現還是自己基本功不紮實，當圖片的大小出現在原生的bootstrap類屬性限定中，圖片會按照自己的大小進行佈局，這樣就會出現圖片小於父div的情況，如下圖所示：問題解決找出圖片所屬類，更改類的屬性為blo

輪播圖片

private MyHandler myHandler = new MyHandler(); Gson gson=new Gson(); PicBean picBean = gson.fromJson(json, PicBean.class);

輸入/輸出（三）NIO.2

Path、Paths和Files核心API 早期的Java只提供了一個File類來訪問檔案系統，但File類的功能比較有限，它不能利用特定檔案系統的特性，File所提供的方法的效能也不高。而且，其大多數方法在出錯時僅返回失敗，並不會提供異常資訊。具體的看這裡： https://blo

淘淘商城系列（五）—— 首頁輪播圖展示（一）

首頁輪播圖展示 taotao-portal-web工程中，動態展示內容資訊。前端團隊：負責JS，html等開發。後端團隊：負責後臺的開發並提供資料給前端。 1、功能分析只需要動態生成一個json資料，輪播圖就可以動態展示： taotao-portal

javaEE (四）javaweb_JavaScript (4) 表格變色：隔行變色

效果如圖所示，隔行變色原始碼： <!-- 新標籤： <thead> <tr> <th> </th> </tr> </thead> <tbody> <

javaEE (四）javaweb_JavaScript (5) 表單全選

Date：2018/11/17 效果如圖：點選一個，其他全選，可以復原：原始碼：  <!-- 2、獲取複選框：var checkAllEle = document.getE

javaEE (四）javaweb_JavaScript (6) 省市二級聯動

Date：2018/11/17 效果圖，籍貫選湖北，然後後面就會出現湖北的地級市: 原始碼： <!-- 1、事件(onchange)； 2、建立二維陣列儲存省份和城市；（陣列長度 = 最大角標+1） 3、獲取使用者選擇的省份(使用方法傳參的方式：th

javaEE (四）javaweb_JavaScript (7) 動態載入列表

Date：2018/11/17 效果如圖，點選按鈕就會增加一個hah，主要是測試建立節點和嵌入節點的功能，具體例子在（6）中有體現：原始碼： <!-- 1、document.createTextNode 建立文字節點 2、document.crea

javaEE (五）javaweb_jQuery (2) toggle切換顯示/隱藏狀態

Date：2018/11/18 用toggle，點選一下可以顯示或者隱藏圖片，回顧style和script的一些屬性用法效果圖：原始碼： 1、style裡面：margin: auto;text-align: center; 2、是click不是onclic

MarkDown語法進階（三）（文字居中、圖片處理、插入視訊音樂、標準字型）

Markdown編輯器本身是內容寫作工具，本身並不支援文字排版，理論上它只是指出哪些內容是表格、哪些內容是標題、哪些是正文圖片程式碼超鏈。但是由於markdown需要輸出，自帶html/css整合，

Flutter佈局錦囊---輪播圖片與滑塊

設計給的效果如下：拿到設計後，先把整體拆分成幾個部分： “運營位”，可以通過左右滑動來切換圖片。 “進度條”，顯示“運營位”當前位置的進度條。然後就可以開始進行編碼了。第1步：繪製元件樹第2步：實現“運營位” Flutter

輪播圖片程式碼整理：型別一：閃現 JQ+原生JS

CSS <style> li{list-style: none;cursor: pointer;} .playWrap{width:1000px;height:400px;overflow: hidden;margin:0 auto; } .playWrap li{height

javaEE (三）javaweb_JavaScript (2)輪播圖片+彈出廣告

相關推薦