輪播圖的實現（自動和手動）
阿新 • • 發佈：2020-11-24
動畫實現輪播圖的自動播放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>輪播圖練習</title> <style> @keyframes moves { 0% { left: 0px; }23% { left: 0px; } 33% { left: -400px; } 42% { left: -400px; } 53% { left: -800px; } 67% { left: -800px; }80% { left: -1200px; } 90% { left: -1200px; } 100% { left: -1600px; } } .window { position: relative; width: 400px; height: 200px; overflow: hidden; margin:0 auto; } .move { position: absolute; top: 0; left: 0; width: 1600px; height: 200px; overflow: hidden; border: 1px solid #ccc; animation: moves 9s linear infinite; } .move img { float: left; width: 400px; height: 200px; } </style> </head> <body> <div class="window"> <div class="move"> <img src="images/lunbotu1.jpg" alt=""> <img src="images/lunbotu2.jpg" alt=""> <img src="images/touxiang1.jpg" alt=""> <img src="images/touxiang2.jpg" alt=""> </div> </div> </body> </html>
手動點選實現輪播圖的切換
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>輪播圖練習</title> <style> .window { position: relative; width: 800px; height: 200px; overflow: hidden; margin: 0 auto; } .move { position: absolute; top: 0; left: 0; width: 3200px; height: 200px; } .move img { float: left; width: 400px; height: 200px; } .lBox { position: absolute; top: 40%; left: 10px; width: 50px; height: 50px; border: 4px solid pink; border-top: none; border-right: none; transform: rotate(45deg); } .rBox { display: none; position: absolute; top: 40%; right: 10px; width: 50px; height: 50px; border: 4px solid pink; border-left: none; border-bottom: none; transform: rotate(45deg); } </style> </head> <body> <div class="window"> <div class="move"> <img src="images/lunbotu1.jpg" alt=""> <img src="images/lunbotu2.jpg" alt=""> <img src="images/touxiang1.jpg" alt=""> <img src="images/touxiang2.jpg" alt=""> <img src="images/lunbotu1.jpg" alt=""> <img src="images/lunbotu2.jpg" alt=""> <img src="images/touxiang1.jpg" alt=""> <img src="images/touxiang2.jpg" alt=""> </div> <div class="lBox"></div> <div class="rBox"></div> </div> <script> //flag用於判斷是否已到照片的最後一張 var flag = 0; var lBox = document.querySelector(".lBox"); var rBox = document.querySelector(".rBox"); var move = document.querySelector(".move"); lBox.addEventListener("click", function (e) { flag++; move.style.left = -800 * flag + 'px'; if (flag == 3) { lBox.style.display = 'none'; rBox.style.display = 'block'; } }); rBox.addEventListener("click", function (e) { flag--; move.style.left = -800 * flag + 'px'; if (flag == 0) { lBox.style.display = 'block'; rBox.style.display = 'none'; } }); </script> </body> </html>