*{ padding:0; margin:0; } .box { width:600px; height:375px; overflow:hidden; position:relative; left:50%; top:60px; margin-left:-300px; } .box:hover { cursor:pointer; } img { width:100%; height:100%; } img.active { position:absolute; top:0; left:0; } .ind { width:128px; height:30px; position:absolute; left:50%; bottom:30px; margin-left: -64px; } p { float:left; width:30px; height:30px; line-height:30px; text-align:center; margin-right:2px; border-radius:50%; background:yellow; } p.active { background:red; }
html + js代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>a website</title> <link type = "text/css" rel = "stylesheet" href = "交替轮播.css"> </head> <body> <div class = "box"> <img class = "active" src = "img/0.jpg"> <img src = "img/1.jpg"> <img src = "img/2.jpg"> <img src = "img/3.jpg"> <div class = "ind"><p class = "active">1</p><p>2</p><p>3</p><p>4</p></div> </div> </body> <script src = "jquery-3.2.1.js"></script> <script type = "text/javascript"> $(function(){ var n = 0; function move(){ if (n === 4) { n = 0 } $("img").eq(n).addClass("active").siblings().removeClass("active"); $("p").eq(n).addClass("active").siblings().removeClass("active"); n++; } timer = setInterval(move,2000); $("p").each(function(i,e){ $(e).click(function(){ $(this).addClass("active").siblings().removeClass("active"); $("img").eq(i).addClass("active").siblings().removeClass("active") }) }); }) </script> </html>