JavaScript 圖片淡入淡出效果實(shí)現(xiàn)

JavaScript是一種用于網(wǎng)頁編程的腳本語言，可用于增強(qiáng)用戶的網(wǎng)頁體驗(yàn)，其中圖片淡入淡出效果是增強(qiáng)用戶體驗(yàn)的重要手段之一。

比如，當(dāng)用戶進(jìn)入一個(gè)網(wǎng)頁，圖片淡入淡出可以讓用戶感到舒適、自然，加強(qiáng)了對(duì)網(wǎng)站的好感度。以下將會(huì)為大家介紹如何使用JavaScript實(shí)現(xiàn)圖片淡入淡出效果。

所需知識(shí)點(diǎn)

要了解如何實(shí)現(xiàn)JavaScript圖片淡入淡出效果，需要掌握下列知識(shí)點(diǎn)：

• HTML
• CSS
• JavaScript基礎(chǔ)

實(shí)現(xiàn)效果

我們來看一下最終的效果：

<div class="container">
<img src="img1.jpg" id="showImg">
</div>

通過JavaScript，點(diǎn)擊按鈕切換圖片并且實(shí)現(xiàn)淡入淡出效果：

<button onclick="changeImg()">點(diǎn)我切換圖片</button>
<script>
var imgArr = ["img1.jpg","img2.jpg","img3.jpg","img4.jpg"];
var index = 0;
function changeImg(){
var container = document.querySelector(".container");
index++; 
index = index % imgArr.length;
container.style.opacity = '0.2';
setTimeout(function(){
var showImg = document.querySelector("#showImg");
showImg.src = imgArr[index];
container.style.opacity = '1';
},500);
}
</script>

解析

首先在HTML中，我們需要定義一個(gè)承載圖片的容器，并設(shè)置其中的圖片的id，在JavaScript中會(huì)用到。按鈕的點(diǎn)擊事件和JavaScript函數(shù)綁定，表示用戶點(diǎn)擊按鈕后，切換圖片并實(shí)現(xiàn)圖片淡入淡出效果。

var imgArr = ["img1.jpg","img2.jpg","img3.jpg","img4.jpg"];
var index = 0;
function changeImg(){
var container = document.querySelector(".container");
index++; 
index = index % imgArr.length;
container.style.opacity = '0.2'; //圖片淡出效果
setTimeout(function(){           //延時(shí)函數(shù)
var showImg = document.querySelector("#showImg");
showImg.src = imgArr[index];   //更改圖片源
container.style.opacity = '1'; //圖片淡入效果
},500);
}

以上就是JavaScript圖片淡入淡出效果實(shí)現(xiàn)的主要代碼。首先定義一個(gè)字符串?dāng)?shù)組imgArr，里面包含將要在容器中顯示的全部圖片。初始時(shí)index=0，即將要顯示的是imgArr數(shù)組的第一張圖片。在changeImg函數(shù)中，我們會(huì)通過index%imgArr.length得到需要顯示的圖片索引，這樣每次切換圖片不論是向前還是向后，都會(huì)循環(huán)數(shù)組。

容器的opacity屬性是用來實(shí)現(xiàn)淡入淡出效果的，當(dāng)前為0.2表示圖片淡出。在延時(shí)函數(shù)中，我們獲取圖片元素，將其src屬性改變?yōu)閷⒁袚Q的圖片，最后將容器的opacity屬性改為1，表示圖片淡入。這一過程中的延時(shí)時(shí)間為500毫秒，此實(shí)現(xiàn)javascript圖片淡入淡出的效果。

總結(jié)

在網(wǎng)頁制作中，JavaScript圖片淡入淡出效果是增強(qiáng)用戶體驗(yàn)的重要方式之一。關(guān)鍵是要理解容器的opacity屬性在實(shí)現(xiàn)淡入淡出效果中的作用，以及通過setTimeout函數(shù)延時(shí)實(shí)現(xiàn)效果的基本原理。掌握以上知識(shí)點(diǎn)，你就可以在自己的網(wǎng)站中添加精美的圖片淡入淡出效果。