溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下如何利用html5實現圖片的淡入淡出效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
目的：
實現圖片的淡入淡出效果
具體代碼如下：
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name="format-detection" content="telephone=no" />
<meta http-equiv='Content-Type' content='textml;charset=UTF-8' />
<title>移動端</title>
<style>
*{
padding: 0;
margin: 0;
}
#slideshow{
width: 160px;
height: 600px;
margin: 0 auto; /*設置在頁面水平居中*/
overflow: hidden;
position: relative;
}
#slideshow img{
width: 160px;
position: absolute; /*圖片采取絕對定位，均位于左上角，重疊在一起*/
top: 0;
left: 0;
opacity: 0; /*初始不透明度為0，圖片都看不見*/
transition: opacity 1s linear; /*--重點--定義一個關于透明度的transition*/
}
#slideshow img.active{
opacity: 1; /*有active類的圖片不透明度為1，即顯示圖片*/
}
</style>
</head>
<body>
<div id="slideshow">
<!-- 插入輪播的圖片們 -->
<img src="img/1 (1).jpg" />
<img src="img/1 (2).jpg" />
<img src="img/1 (3).jpg" />
<img src="img/1 (4).jpg" />
<img src="img/1 (5).jpg" />
<img src="img/1 (6).jpg" />
<img src="img/1 (7).jpg" />
<img src="img/1 (8).jpg" />
<img src="img/1 (9).jpg" />
<img src="img/1 (10).jpg" />
<img src="img/1 (11).jpg" />
</div>
<script>
//---------主角：輪播圖函數-------------
function slideshow() {
var slideshow=document.getElementById("slideshow"),
imgs=slideshow.getElementsByTagName("img"), //得到圖片們
current=0; //current為當前活躍的圖片編號
function slideOff() {
imgs[current].className=""; //圖片淡出
}
function slideOn() {
imgs[current].className="active"; //圖片淡入
}
function changeSlide() { //切換圖片的函數
slideOff();
current++; //自增1
if(current>=imgs.length) current=0;
slideOn();
}
//每2s調用changeSlide函數進行圖片輪播
var slideon=setInterval(changeSlide,2000);
slideshow.onmouseover=function () {
clearInterval(slideon); //當鼠標移入時清除輪播事件
}
slideshow.onmouseout=function () {
slideon=setInterval(changeSlide,1500); //當鼠標移出時重新開始輪播事件
}
}
slideshow();
</script>
</body>
</html>以上是“如何利用html5實現圖片的淡入淡出效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
