可以自动播放，点击下方小原点可切换图片
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播demo</title> <link href="lunbo.css" rel="stylesheet" type="text/css"> </head> <body> <div class="lunboDemo"> <div class="content"> <section> <div>img1</div> <div>img2</div> <div>img3</div> <div>img4</div> </section> <span class="leftBtn"> <</span> <span class="rightBtn"> ></span> <ul class="dotIcon"> <li class="active"></li> <li></li> <li></li> <li></li> </ul> </div> </div> <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="lunbo.js"></script> </body> </html>css
.lunboDemo{ position: relative; } .leftBtn:hover,.rightBtn:hover{ cursor: pointer; } .leftBtn,.rightBtn{ position: absolute; width: 50px; height: 50px; background-color: black; color: white; line-height: 50px; text-align: center; z-index: 99; opacity: 0.5; } .leftBtn{ top: 40%; left: 0; } .rightBtn{ top: 40%; right: 0; } .content{ margin: 100px auto 10px auto; width: 1200px; height: 300px; background-color: #a3a8a8; position: relative; } .content div{ position: absolute; width: 1200px; height: 300px; color: white; line-height: 300px; text-align: center; display: none; } .content div:nth-of-type(1){ display: block; background-color: #4c3da8; } .content div:nth-of-type(2){ background-color: #1492a8; } .content div:nth-of-type(3){ background-color: #8da86f; } .content div:nth-of-type(4){ background-color: #a83c39; } .dotIcon{ display: flex; justify-content: space-between; width: 100px; margin: 0 auto; position: absolute; bottom: 10px; left: 0; right: 0; z-index: 999; } .dotIcon .active{ width: 30px; background-color: white; } ul { padding-inline-start: 0px !important; } .dotIcon li{ width: 10px; height: 10px; background-color: #a3a8a8; list-style: none; border-radius: 20px; transition: all .5s; } .dotIcon li:hover{ cursor: pointer; }js
let index=0; function clickRight(){ index=index+1 if (index > 3) { index=0 } change(index) } function clickLeft(){ index=index-1 if (index < 0) { index=3 } change(index) } function change(index) { $('.content div').eq(index).fadeIn().siblings().fadeOut() $('.dotIcon li').eq(index).addClass('active').siblings().removeClass('active') } $('.rightBtn').on('click',clickRight) $('.leftBtn').on('click',clickLeft) let time=setInterval(clickRight,2000) $('.content').on('mouseenter',function () { clearInterval(time) }) $('.content').on('mouseleave',function () { time=setInterval(clickRight,2000) }) $('.dotIcon li').on('click',function () { index=$(this).index() change($(this).index()) })