資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學使用 JavaScript 實現影像漸隱過渡效果
影像過渡是指更改影像，用一個影像替換另一個影像。使用者可以在影像滑塊中看到影像過渡。
在開發影像滑塊時，我們應該關注影像過渡的動畫效果，以使應用程式的使用者體驗更具吸引力。在本教程中，我們將學習如何使用各種方法為影像過渡新增漸隱效果。
向影像新增類以顯示具有漸隱效果的影像
我們可以使用 CSS 為影像過渡新增漸隱效果。CSS 的 transition 屬性允許我們向影像新增任何過渡。因此，我們可以向一個類新增 CSS，並使用 JavaScript 向影像新增該類，這將向影像新增過渡。
語法
使用者可以按照以下語法向影像新增類以顯示具有漸隱效果的影像。
document.getElementById("image").classList = 'class_name';
在上面的語法中，我們使用 id 訪問影像，並將“class_name”類新增到影像的類列表中。
示例
在下面的示例中，我們已將影像新增到網頁，並使用一些 CSS 為影像指定了高度和寬度。此外，我們在 img 類中添加了值為 0 的 opacity。
此外，我們還向 animate 類添加了“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://tutorialspoint.tw/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);
}
在上面的語法中，current 變數跟蹤要顯示在網頁上的影像。我們使用 fadeIn() 方法顯示當前影像並隱藏所有其他影像。
步驟
步驟 1 – 使用類名訪問所有影像。
步驟 2 – 使用 for 迴圈遍歷所有影像，並使用影像的 display 屬性隱藏除第一張影像之外的所有影像。
步驟 3 – 建立一個名為“current”的變數，並將其初始化為零。
步驟 4 – 建立一個 startImageTrans() 函式，並在其中使用 setInterval() 方法在每 3500 毫秒後呼叫 fade() 函式。但是，使用者可以根據自己的需求設定時間間隔。
步驟 5 – 在 fade() 函式中，使用 JQuery 的 eq() 方法訪問當前子元素。使用 fadeout() 方法隱藏當前影像。
步驟 6 – 將 current 變數的值增加 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://tutorialspoint.tw/static/images/logocolor.png" class = "sliderImage" alt = "Image 1">
<img src ="https://tutorialspoint.tw/images/trending_categories.svg" class = "sliderImage" alt = "Image 2">
<img src = "https://tutorialspoint.tw/images/Data-Structure.png" class = "sliderImage" alt = "Image 3">
<img src = "https://tutorialspoint.tw/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 transition 屬性向影像過渡新增漸隱效果
在這種方法中，我們將為 HTML 元素設定背景影像。此外，我們還將為 HTML 元素的背景新增漸隱過渡。因此，每當我們更改背景時，它都會顯示漸隱效果。
語法
使用者可以按照以下語法使用 CSS transition 屬性向背景影像新增漸隱效果。
<style>
#background-div {
background-image: url("image_URL");
transition: background 2s linear;
}
</style>
function FadeImage() {
imageDiv.style.backgroundImage = `url(${allImages[current]})`;
}
我們在上面的語法中使用 CSS 向元素添加了背景影像和“transition”屬性。每當我們使用 JavaScript 更改背景影像時，它都會自動將漸隱過渡應用於影像。
示例
在下面的示例中，div 元素包含初始背景影像。我們建立了一個包含不同背景影像 URL 的 images 陣列。我們使用 setInterval() 方法在每 3000 毫秒後呼叫 fadeInImage() 函式。
在 fadeInImage() 函式中，我們重複更改背景影像，並在影像更改時使用 CSS 應用漸隱過渡。
<html>
<head>
<style>
#background-div {
background-position: center;
background-size: cover;
background-image:
url("https://tutorialspoint.tw/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://tutorialspoint.tw/images/trending_categories.svg",
"https://tutorialspoint.tw/javascript/images/javascript-minilogo.jpg",
"https://tutorialspoint.tw/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”屬性。
5K+ 瀏覽量
