使用 JavaScript 實現具有淡入淡出效果的圖像過渡
影像轉換意味著更改影像並將一張影像替換為另一張影像。使用者可以在圖像滑桿中看到圖像過渡。
在開發圖像滑桿時，我們應該專注於圖像過渡的動畫，以使應用程式具有有吸引力的用戶體驗。在本教程中，我們將學習使用各種圖像過渡方法添加淡入淡出效果。
為影像新增類別以顯示具有淡入淡出效果的影像
我們可以使用 CSS 為圖像過渡添加淡入淡出效果。 CSS 的過渡屬性允許我們向圖像添加任何過渡。因此，我們可以將 CSS 添加到一個類，並使用 JavaScript，我們可以將一個類別添加到圖像，這將為圖像添加一個過渡
文法
使用者可以按照下面的語法向圖像添加一個類，以顯示具有淡入淡出效果的圖像。
document.getElementById("image").classList = 'class_name';
在上面的語法中，我們使用 id 存取映像並將「class_name」類別新增到映像的類別清單中。
範例
在下面的範例中，我們為網頁新增了圖像，並使用一些 CSS 給圖像指定了高度和寬度。此外，我們還在 img 類別中加入了值為 0 的不透明度。
此外，我們也為動畫類別新增了「transition」和「opacity」屬性。最初，圖像不包含“animate”類別。當使用者按一下該按鈕時，它會執行 FadeIn() 函數，將「animate」類別新增至圖像。
在輸出中，我們可以觀察到當我們新增「animate」類別時圖像會淡入。
<html>
<head>
<style>
img {
opacity: 0;
}
.animate {
-webkit-transition: 2s;
transition: 2s;
opacity: 1;
}
</style>
</head>
<body>
<h2> Using the <i> class </i> to add fadding effect in image transition </h2>
<img id = "image" style = "width: 500px; height: 200px;" src = "https://www.tutorialspoint.com/static/images/logo-color.png" alt = "Logo Image"> <br>
<button type = "button" onclick = "FadeIn()"> Fade In image </button>
<script>
function FadeIn() {
document.getElementById("image").classList = 'animate';
}
</script>
</body>
</html>
使用 jQuery 的 fadeIn() 和 fadeout() 方法為圖像添加淡入淡出過渡
JQuery的fadeout()方法允許我們以淡入淡出的效果從網頁中刪除圖像。 fadeIn() 方法讓我們可以在網頁上新增具有淡入淡出效果的圖片。
在這裡，我們將使用 fadeout() 和 fadeIn() 方法為影像過渡添加適當的淡入淡出效果。
文法
使用者可以依照下列語法使用JQuery的fadeout()和fadeIn()方法為影像過渡添加淡入淡出效果。
setInterval(fade, 3500);
function fade() {
$("#slider img").eq(current).fadeOut(0);
current = ++current % images.length;
$("#slider img").eq(current).fadeIn(2000);
}
在上面的語法中，當前變數追蹤要在網頁上顯示的圖像。我們使用 fadeIn() 方法顯示目前影像並隱藏所有其他影像。
步驟
第 1 步 – 使用類別名稱存取所有映像。
第 2 步 – 使用 for 迴圈迭代所有圖像，並使用圖像的 display 屬性隱藏除第一張圖像之外的所有圖像。
第 3 步 – 建立一個名為「current」的變數並將其初始化為零。
步驟 4 – 建立一個 startImageTrans() 函數，並使用其中的 setInterval() 方法在每 3500 毫秒後呼叫 fade() 函數。不過，使用者可以依照自己的需求設定時間間隔
步驟 5 – 在 fade() 函數內，使用 JQuery 的 eq() 方法存取目前子層級。使用 fadeout() 方法隱藏目前影像。
步驟6 – 將目前變數的值增加1，如果它大於圖總數，則將其設為0。
第 7 步 – 使用 fadeIn() 方法顯示目前影像。
範例
在下面的範例中，我們建立了 HTML div 元素並新增了五個不同的圖像。我們在 JavaScript 中對所有圖像一一實現了上述演算法，並具有淡入淡出過渡效果。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<style>
img {
height: 200px;
width: 500px;
}
</style>
</head>
<body>
<h3> Using the <i> jQuery fadeIn() method </i> to add fadding effect in image transition </h3>
<div id="slider">
<img src = "https://www.tutorialspoint.com/static/images/logocolor.png" class = "sliderImage" alt = "Image 1">
<img src ="https://www.tutorialspoint.com/images/trending_categories.svg" class = "sliderImage" alt = "Image 2">
<img src = "https://www.tutorialspoint.com/images/Data-Structure.png" class = "sliderImage" alt = "Image 3">
<img src = "https://www.tutorialspoint.com/images/Javascript.png" class = "sliderImage" alt = "Image 4">
</div>
<br> <br>
<button type = "button" onclick = "startImageTrans()"> Start Image Transitions </button>
<script>
let images = document.querySelectorAll('.sliderImage');
for (let i = 0; i < images.length; i++) {
if (i != 0)
images[i].style.display = "none";
}
var current = 0;
function startImageTrans() {
setInterval(fade, 3500);
}
function fade() {
// hide the previous image with fading effect
$("#slider img").eq(current).fadeOut(0);
current++;
current = current % images.length;
// show a current image with fading effect
$("#slider img").eq(current).fadeIn(2000);
}
</script>
</body>
</html>
使用 CSS 過渡屬性為圖片過渡添加淡入淡出效果
在這個方法中，我們將為 HTML 元素設定背景圖片。此外，我們將為 HTML 元素的背景添加淡入淡出過渡。所以，每當我們改變背景時，它就會出現淡入淡出的效果。
文法
使用者可以依照以下語法使用 CSS 過渡屬性為背景圖片添加淡入淡出效果。
<style>
#background-div {
background-image: url("image_URL");
transition: background 2s linear;
}
</style>
function FadeImage() {
imageDiv.style.backgroundImage = `url(${allImages[current]})`;
}
我們使用上述語法中的 CSS 向元素添加了背景圖像，並「過渡」到背景。每當我們使用 JavaScript 更改背景圖像時，它都會自動將淡入淡出過渡應用於圖像。
範例
在下面的範例中，div 元素包含初始背景圖像。我們建立了包含不同背景圖像的 URL 的圖像陣列。我們使用 setInterval() 方法每 3000 毫秒呼叫 fadeInImage() 函數。
在 fadeInImage() 函數中，我們反覆更改背景圖像，當圖像更改時，會使用 CSS 進行淡入淡出過渡。
<html>
<head>
<style>
#background-div {
background-position: center;
background-size: cover;
background-image:
url("https://www.tutorialspoint.com/images/trending_categories.svg");
display: flex;
height: 300px;
width: 600px;
transition: background 2s linear;
}
</style>
</head>
<body>
<h3>Using the <i> CSS transition </i> to add fadding effect in image transition</h3>
<div id = "background-div"></div>
<script>
let allImages = [
"https://www.tutorialspoint.com/images/trending_categories.svg",
"https://www.tutorialspoint.com/javascript/images/javascript-minilogo.jpg",
"https://www.tutorialspoint.com/css/images/css-mini-logo.jpg",
]
const imageDiv = document.getElementById("background-div");
setInterval(FadeImage, 3000);
let current = 0;
function FadeImage() {
current++;
if (current >= allImages.length) current = 0;
imageDiv.style.backgroundImage = `url(${allImages[current]})`;
}
</script>
</body>
</html>
我們學習了三種為影像過渡添加淡入淡出效果的方法。我們在第二種方法中使用了 JQuery 的 fadeIn() 和 fadeout() 方法，在第一種和第三種方法中使用了 CSS 的「transition」屬性。
以上是使用 JavaScript 實現具有淡入淡出效果的圖像過渡的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
如何在瀏覽器中優化JavaScript代碼以進行性能？
Mar 18, 2025 pm 03:14 PM
本文討論了在瀏覽器中優化JavaScript性能的策略，重點是減少執行時間並最大程度地減少對頁面負載速度的影響。
如何使用瀏覽器開發人員工具有效調試JavaScript代碼？
Mar 18, 2025 pm 03:16 PM
本文討論了使用瀏覽器開發人員工具的有效JavaScript調試，專注於設置斷點，使用控制台和分析性能。
如何有效地使用Java的收藏框架？
Mar 13, 2025 pm 12:28 PM
本文探討了Java收藏框架的有效使用。 它強調根據數據結構，性能需求和線程安全選擇適當的收集（列表，設置，地圖，隊列）。 通過高效優化收集用法
如何使用源地圖調試縮小JavaScript代碼？
Mar 18, 2025 pm 03:17 PM
本文說明瞭如何使用源地圖通過將其映射回原始代碼來調試JAVASCRIPT。它討論了啟用源地圖，設置斷點以及使用Chrome DevTools和WebPack之類的工具。
開始使用Chart.js：PIE，DONUT和BUBBLE圖表
Mar 15, 2025 am 09:19 AM
本教程將介紹如何使用 Chart.js 創建餅圖、環形圖和氣泡圖。此前，我們已學習了 Chart.js 的四種圖表類型：折線圖和條形圖（教程二），以及雷達圖和極地區域圖（教程三）。 創建餅圖和環形圖 餅圖和環形圖非常適合展示某個整體被劃分為不同部分的比例。例如，可以使用餅圖展示野生動物園中雄獅、雌獅和幼獅的百分比，或不同候選人在選舉中獲得的投票百分比。 餅圖僅適用於比較單個參數或數據集。需要注意的是，餅圖無法繪製值為零的實體，因為餅圖中扇形的角度取決於數據點的數值大小。這意味著任何占比為零的實體
誰得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。
