網頁特效--圖片淡入淡出效果
阿新 • • 發佈：2018-12-16
1.通過CSS實現圖片淡入淡出效果：
主要是應用到了CSS3的動畫特效中的animation-delay來打一個時間差，首先將第一張圖片的opacity(透明度)設定為1，其他的圖片則設定為0，在設定動畫時長時根據你要顯示的時間(如2s)，則設定動畫時長為2s x 圖片張數，我的則是10s，相應的animation-delay則是從第一張為0開始，依次+2遞增；
程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>圖片效果</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> *{padding: 0;margin: 0;} #wrapper{width: 170px;height: 120px;margin: 30px auto;} .imgList li{position: absolute;list-style: none;} .imgList li img{width: 170px; height: 120px;} #image1{ opacity: 1; z-index: 5; animation: turn 10s linear infinite; -webkit-animation: turn 10s linear infinite; -o-animation: turn 10s linear infinite; -moz-animation: turn 10s linear infinite; } #image2{ opacity: 0; z-index: 4; animation: turn 10s linear 2s infinite; -webkit-animation: turn 10s linear 2s infinite; -o-animation: turn 10s linear 2s infinite; -moz-animation: turn 10s linear 2s infinite; } #image3{ opacity: 0; z-index: 3; animation: turn 10s linear 4s infinite; -webkit-animation: turn 10s linear 4s infinite; -o-animation: turn 10s linear 4s infinite; -moz-animation: turn 10s linear 4s infinite; } #image4{ opacity: 0; z-index: 2; animation: turn 10s linear 6s infinite; -webkit-animation: turn 10s linear 6s infinite; -o-animation: turn 10s linear 6s infinite; -moz-animation: turn 10s linear 6s infinite; } #image5{ opacity: 0; z-index: 1; animation: turn 10s linear 8s infinite; -webkit-animation: turn 10s linear 8s infinite; -o-animation: turn 10s linear 8s infinite; -moz-animation: turn 10s linear 8s infinite; } /*淡入淡出動畫*/ @keyframes turn{ 10%{opacity: 1;} 20%{opacity: 0.2;} 25%{opacity: 0;} 100%{opacity: 0;} } @-o-keyframes turn{ 10%{opacity: 1;} 20%{opacity: 0.2;} 25%{opacity: 0;} 100%{opacity: 0;} } @-moz-keyframes turn{ 10%{opacity: 1;} 20%{opacity: 0.2;} 25%{opacity: 0;} 100%{opacity: 0;} } @-webkit-keyframes turn{ 10%{opacity: 1;} 20%{opacity: 0.2;} 25%{opacity: 0;} 100%{opacity: 0;} } </style> </head> <body> <div id="wrapper"> <div id="banner"> <ul class="imgList"> <li><a href="javascript:void(0)"><img src="./img/01.jpg" id="image1"/></a></li> <li><a href="javascript:void(0)"><img src="./img/02.jpg" id="image2"/></a></li> <li><a href="javascript:void(0)"><img src="./img/03.jpg" id="image3"/></a></li> <li><a href="javascript:void(0)"><img src="./img/04.jpg" id="image4"/></a></li> <li><a href="javascript:void(0)"><img src="./img/05.jpg" id="image5"/></a></li> </ul> </div> </div> </body> </html>
2.通過JavaScript來實現淡入淡出：
主要是通過js中的setTimeout()函式與setInterval()函式實現的，通過setTimeout()函式不同的延遲時間來呼叫改變透明度的函式startMove()，而在startMove()函式中則有setInterval()函式定時地減小透明度；
程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>圖片效果</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> *{padding: 0;margin: 0;} #wrapper{width: 170px;height: 120px;margin: 30px auto;} .imgList li{position: absolute;list-style: none;} .imgList li img{width: 170px; height: 120px;} #image1{opacity: 1;} #image2,#image3,#image4,#image5{opacity: 0;} </style> </head> <body> <div id="wrapper"> <div id="banner"> <ul class="imgList"> <li><a href="javascript:void(0)"><img src="./img/01.jpg" id="image1"/></a></li> <li><a href="javascript:void(0)"><img src="./img/02.jpg" id="image2"/></a></li> <li><a href="javascript:void(0)"><img src="./img/03.jpg" id="image3"/></a></li> <li><a href="javascript:void(0)"><img src="./img/04.jpg" id="image4"/></a></li> <li><a href="javascript:void(0)"><img src="./img/05.jpg" id="image5"/></a></li> </ul> </div> </div> </body> <script> window.onload = function () { function startMove(img, source, target) { var speed = -0.1 ; var flag = source; var obj = document.getElementById(img); obj.timer = null; //初始化,清除定時器 clearInterval(obj.timer); obj.timer = setInterval(function () { if (flag <= target) { clearInterval(obj.timer); setTimeout(function () { startMove(img,1,0); }, 7000); } else { flag +=speed obj.style.opacity = flag; } }, 200); } setTimeout(function () {startMove('image1', 1, 0.1);}, 0); setTimeout(function () { startMove('image2', 1, 0.1); }, 1800); setTimeout(function () { startMove('image3', 1, 0.1); }, 3600); setTimeout(function () { startMove('image4', 1, 0.1); }, 5400); setTimeout(function () { startMove('image5', 1, 0.1); }, 7200); } </script> </html>
實現效果的GIF圖如下：
