使用JavaScript完成圖片的輪播效果

来源:https://www.cnblogs.com/zllk/archive/2020/05/05/12833749.html
-Advertisement-
Play Games

使用JS完成圖片的輪播效果 需求分析 在我們的網站首頁,通常需要有一塊區域,用來顯示廣告,但是這塊區域如果僅僅顯示一張圖片肯定是不夠的, 故我們需要採用動態迴圈播放我們所有的廣告. 顯示效果照抄黑馬程式員的網站首頁 技術分析 切換圖片: 每個三秒鐘做一件事: window.setInterval() ...


使用JS完成圖片的輪播效果

需求分析

在我們的網站首頁,通常需要有一塊區域,用來顯示廣告,但是這塊區域如果僅僅顯示一張圖片肯定是不夠的, 故我們需要採用動態迴圈播放我們所有的廣告. 顯示效果照抄黑馬程式員的網站首頁

技術分析

切換圖片:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <script>
        function changeImg() {
            alert("123")
            var img222 = document.getElementById(img1);

            img222.src = "img/2.jpg";
        }
    </script>

</head>
<body>

<input type="button" value="點擊換圖片" onclick="changeImg()">
<img src="img/1.jpg" id="img1">
</body>
</html>

每個三秒鐘做一件事:
window.setInterval():按照指定周期(以毫秒計)來調用函數或計算表達式
setInterval("alert('123')",2000)
window可以不寫,第一個變數需要用“”,裡面的“”需要變成‘’

window.setTimeout():以指定的毫秒數後調用函數或者計算表達式

window.clearInterval():
window.setInterval()方法或返回一個int類型的id,可以將id賦給window.clearInterval()來實現關閉
window.clearTimeout():

代碼實現:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			/* 當頁面載入完成的時候, 動態切換圖片
				 1.確定事件:
				 2.事件所要觸發的函數
			 */
			var index = 1;
			//切換圖片的函數
			function changeAd(){
				//獲取要操作的img
				var img = document.getElementById("imgAd");
				img.src = "../img/"+(index%3+1)+".jpg";  //0,1,2    //1,2,3
				index++;
			}
			
			function init(){
				//啟動定時器
				setInterval("changeAd()",3000);
			}
		</script>
	</head>
	<body onload="init()">
		<img src="../img/1.jpg" id="imgAd"/>
	</body>
</html>

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 使用JS控制下拉列表左右選擇 需求分析 在我們的分類管理中,我們要能夠去修改我們的分類信息,當我們一點修改的時候,跳轉到一個可以編輯的頁面,這裡面能夠修改分類的名稱,分類的描述,以及分類的商品 技術分析 ondblclick="selectOne()":雙擊事件 select標簽的屬性multipl ...
  • 省市聯動效果 技術分析 什麼是DOM: Document Object Model : 管理我們的文檔,增刪改查規則 【HTML中的DOM操作】 一些常用的 HTML DOM 方法: getElementById(id) 獲取帶有指定 id 的節點(元素) appendChild(node) 插入新 ...
  • 覆選框的全選和全不選 需求分析 ​ 商品分類界面中,當我們點擊全選框的時候,我們希望選中所有的商品,當我們取消掉的時候,我們希望不選中所有的商品 技術分析 checked="checked" 選擇覆選框 事件 : onclick點擊事件 getElementsByTagName:返回包含帶有指定標簽 ...
  • 表格隔行換色 需求分析 ​ 我們商品分類的信息太多,如果每一行都顯示同一個顏色的話會讓人看的眼花,為了提高用戶體驗,減少用戶看錯的情況,需要對錶格進行隔行換色 技術分析 table對象 集合 cells[]:返回包含表格中所有單元格的一個數組。 rows[]:返回包含表格中所有行的一個數組。 tBo ...
  • 完成表單的校驗 需求分析 ​ 昨天我們做了一個簡單的表單校驗,每當用戶輸入出錯的時候,我們是彈出了一個對話框,提示用戶去修改。這樣的用戶體驗效果非常不好好。我們今天就是需要來對他進行一個修改,當用戶輸入信息有問題的時候,我們就再輸入框的後面給他一個友好提示。 技術分析 【HTML中innerHTML ...
  • 一、複習了伸縮佈局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="CSS/base.css"> <link rel="s ...
  • TS 自學筆記(一) 本文寫於 2020 年 5 月 6 日 日常廢話兩句 有幾天沒有更新了,最近學的比較亂,休息了兩天感覺好一些了。這兩天玩了幾個設計軟體,過幾天也寫篇文章分享分享。 為啥要學 TS? 進入正題哈,經常寫 JS 的人會特別多的碰到一個 bug: 之類的。 這是為什麼呢? 其實就是我 ...
  • 完成頁面定時彈出廣告 需求分析 ​ 一般網頁,當我們剛打開的時候,它會5秒之後,顯示一個廣告,讓我們看5秒鐘,然後他的廣告就自動消失了! 技術分析 定時器 setInterval : 每隔多少毫秒執行一次函數 setTimeout: 多少毫秒之後執行一次函數 clearInterval clearT ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...