轮播图 · 前端

# 轮播图 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="main.js"></script> </head> <body> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> <style> * { margin: 0; padding: 0; } a { text-decoration: none; } .container { position: relative; width: 600px; height: 400px; margin: 100px auto 0 auto; box-shadow: 0 0 5px green; overflow: hidden; } .wrap { position: absolute; width: 4200px; height: 400px; z-index: 1; } .container .wrap img { float: left; width: 600px; height: 400px; } .container .buttons { position: absolute; right: 150px; bottom: 20px; width: 100px; height: 10px; z-index: 2; } .container .buttons span { margin-left: 5px; display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: green; text-align: center; color: white; cursor: pointer; } .container .buttons span.on { background-color: red; } .container .arrow { position: absolute; top: 35%; color: green; padding: 0px 14px; border-radius: 50%; font-size: 50px; z-index: 2; display: none; } .container .arrow_left { left: 10px; } .container .arrow_right { right: 10px; } .container:hover .arrow { display: block; } .container .arrow:hover { background-color: rgba(0, 0, 0, 0.2); } </style> </head> <body> <div class="container"> <div class="wrap" style="left:-600px;"> <img src="./5.jpg" alt=""> <img src="./1.jpg" alt=""> <img src=".2.jpg" alt=""> <img src="./3.jpg" alt=""> <img src="./4.jpg" alt=""> <img src="./5.jpg" alt=""> <img src="./1.jpg" alt=""> </div> <div class="buttons"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> <a href="javascript:;" class="arrow arrow_left"><</a> <a href="javascript:;" class="arrow arrow_right">></a> </div> <script> var wrap = document.querySelector(".wrap"); var next = document.querySelector(".arrow_right"); var prev = document.querySelector(".arrow_left"); next.onclick = function () { next_pic(); } prev.onclick = function () { prev_pic(); } function next_pic() { var newLeft; if (wrap.style.left === "-3600px") { newLeft = -1200; } else { newLeft = parseInt(wrap.style.left) - 600; } wrap.style.left = newLeft + "px"; } function prev_pic() { var newLeft; if (wrap.style.left === "0px") { newLeft = -2400; } else { newLeft = parseInt(wrap.style.left) + 600; } wrap.style.left = newLeft + "px"; } </script> </body> </html> </body> </html> ~~~