站長資訊網
        最全最豐富的資訊網站

        利用html5實現圖片的淡入淡出效果

        利用html5實現圖片的淡入淡出效果

        目的:

        實現圖片的淡入淡出效果

        (學習視頻分享: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教程

        贊(1)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 精品a在线观看| 亚洲国产精品不卡毛片a在线| 91精品福利在线观看| 无码国产69精品久久久久网站| 国产精品无码永久免费888| 92国产精品午夜福利| 亚洲国产精品无码久久| 久久精品国产黑森林| 中文字幕一区二区精品区| 国产精品丝袜一区二区三区| 亚洲国产一成人久久精品| 女人高潮内射99精品| 国产精品亚洲αv天堂无码| 亚洲精品你懂的| 国产精品素人搭讪在线播放| 亚洲无线观看国产精品| 欧美成人精品网站播放 | 国产精品香蕉在线观看| 欧美精品1区2区| 国产精品亚洲午夜一区二区三区| 久久99精品久久久久婷婷| 亚洲国产精品成人精品无码区| 亚洲精品无码专区在线播放 | 黄床大片免费30分钟国产精品| 99精品福利国产在线| 自怕偷自怕亚洲精品| 午夜精品美女写真福利| 久久免费精品视频| 久久精品人人做人人爽电影| 国产精品宾馆在线精品酒店| 国产精品电影在线观看| 国产精品久久永久免费| 国内精品久久久久影院免费| 国产精品视频一区二区三区经| 国产精品国产三级国产专播 | 8AV国产精品爽爽ⅴa在线观看| 2020久久精品国产免费| 99热精品在线| 久久精品国产99国产精品澳门| 四虎国产精品免费久久5151| 99久久国产综合精品五月天喷水|