动画实现轮播图的自动播放
<!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; 400px; height: 200px; overflow: hidden; margin: 0 auto; } .move { position: absolute; top: 0; left: 0; 1600px; height: 200px; overflow: hidden; border: 1px solid #ccc; animation: moves 9s linear infinite; } .move img { float: left; 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; 800px; height: 200px; overflow: hidden; margin: 0 auto; } .move { position: absolute; top: 0; left: 0; 3200px; height: 200px; } .move img { float: left; 400px; height: 200px; } .lBox { position: absolute; top: 40%; left: 10px; 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; 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"); var img = document.querySelectorAll("img"); console.log(img.length); var length; //一张轮播图里显示的图的个数 var num = 2; if (img.length % num == 0) length = img.length / num; else length = img.length / num + 1; lBox.addEventListener("click", function (e) { flag++; move.style.left = -800 * flag + 'px'; if (flag == length - 1) { 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>