<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title></title> <link rel="stylesheet" href="css/index.css"> </head> <body> <div class="banner"> <div class="picture"> <div class="picture-list"> <div class="picture-item"> <img src="img/1.jpg"> </div> <div class="picture-item"> <img src="img/7.jpg"> </div> <div class="picture-item"> <img src="img/8.jpg"> </div> <div class="picture-item"> <img src="img/1.jpg"> </div> </div> </div> <div class="indicator"> <button class="indicator-item" style="background-color: chartreuse;"></button> <button class="indicator-item"></button> <button class="indicator-item"></button> </div> </div> <script src="js/index.js"></script> </body> </html>
let wart = document.getElementsByClassName('clicked'); let kill = wart.children; let face = document.getElementsByClassName('picture-item')[0]; let good = document.getElementsByClassName('indicator')[0]; let tim = good.children; let wel = 0; let nam = face.offsetWidth let banner = document.getElementsByClassName('banner')[0]; let int = setInterval(banners, 2000); function banners() { for (i = 0; i < tim.length; i++) { tim[i].style.backgroundColor = '#ffffff'; } wel++; face.style.marginLeft = -nam * wel + "px"; face.style.transition = "all 1s"; if (wel >= 3) { setTimeout(function() { wel = 0; face.style.transition = ""; face.style.marginLeft = "0px"; }, 1000) tim[0].style.backgroundColor = "chartreuse"; } else { tim[wel].style.backgroundColor = "chartreuse"; } }
*{ padding: 0; margin: 0; } .banner{ width: 100%; height: 450px; position: relative; } .clicked{ width: 100%; display: flex; justify-content: space-between; position: absolute; top: 40%; } .clicked-item{ width: 10%; height: 50px; } .clicked-item img{ width: 100%; } .picture{ width: 100%; height: 450px; overflow: hidden; } .picture-item{ width: 25%; } .picture-item img{ height: 450px; width: 100%; } .picture-list{ width: 400%; display: flex; } .indicator{ width: 100%; position: absolute; bottom: 10px; left: 35%; } .indicator-item{ width: 10%; }
