站長資訊網(wǎng)
目的：
實現(xiàn)圖片的淡入淡出效果
（學(xué)習(xí)視頻分享：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; /*設(shè)置在頁面水平居中*/ overflow: hidden; position: relative; } #slideshow img{ width: 160px; position: absolute; /*圖片采取絕對定位，均位于左上角，重疊在一起*/ top: 0; left: 0; opacity: 0; /*初始不透明度為0，圖片都看不見*/ transition: opacity 1s linear; /*--重點--定義一個關(guān)于透明度的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> //---------主角：輪播圖函數(shù)------------- function slideshow() { var slideshow=document.getElementById("slideshow"), imgs=slideshow.getElementsByTagName("img"), //得到圖片們 current=0; //current為當(dāng)前活躍的圖片編號 function slideOff() { imgs[current].className=""; //圖片淡出 } function slideOn() { imgs[current].className="active"; //圖片淡入 } function changeSlide() { //切換圖片的函數(shù) slideOff(); current++; //自增1 if(current>=imgs.length) current=0; slideOn(); } //每2s調(diào)用changeSlide函數(shù)進行圖片輪播 var slideon=setInterval(changeSlide,2000); slideshow.onmouseover=function () { clearInterval(slideon); //當(dāng)鼠標(biāo)移入時清除輪播事件 } slideshow.onmouseout=function () { slideon=setInterval(changeSlide,1500); //當(dāng)鼠標(biāo)移出時重新開始輪播事件 } } slideshow(); </script> </body> </html>
登錄后復(fù)制
相關(guān)推薦：html5教程
