使用时直接创建img文件夹放进去自己想要的图就ok，然后在HTML主页里面修改一下路径就可以用了
HTML：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>明</title> 6 <link rel="stylesheet" type="text/css" href="css/页面效果.css"/> 7 </head> 8 <body> 9 <div id="kuang"> 10 <a href="index.html" class="tu1"><img src="img/www.acg.gy_07.jpg" style="width: 1280px;height: 720px;"></a> 11 <a href="index.html" class="tu1"><img src="./img/www.acg.gy_11.jpg" style="width: 1280px;height: 720px;"></a> 12 <a href="index.html" class="tu1"><img src="./img/www.acg.gy_31.png" style="width: 1280px;height: 720px;"></a> 13 <a href="index.html" class="tu1"><img src="./img/www.acg.gy_41.png" style="width: 1280px;height: 720px;"></a> 14 <a href="index.html" class="tu1"><img src="./img/www.acg.gy_09.jpg" style="width: 1280px;height: 720px;"></a> 15 <a href="index.html" class="tu1"><img src="./img/www.acg.gy_47.png" style="width: 1280px;height: 720px;"></a> 16 <a href="index.html" class="tu1"><img src="./img/www.acg.gy_05.png" style="width: 1280px;height: 720px;"></a> 17 <a href="index.html" class="tu1"><img src="./img/www.acg.gy_48.jpg" style="width: 1280px;height: 720px;"></a> 18 <div class="but1"><p>上一张</p></div> 19 <div class="but2"><p>下一张</p></div> 20 <ul id="nav"> 21 <li class="but3">1</li> 22 <li class="but3">2</li> 23 <li class="but3">3</li> 24 <li class="but3">4</li> 25 <li class="but3">5</li> 26 <li class="but3">6</li> 27 <li class="but3">7</li> 28 <li class="but3">8</li> 29 </ul> 30 </div> 31 <script src="./js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script> 32 <script type="text/javascript"> 33 var i=0; 34 var auto; 35 $(document).ready(function(){ 36 $(".tu1").eq(0).show().siblings(".tu1").hide(); 37 $(".but1").click(function(){ 38 clearInterval(auto); 39 if(i == 0){ 40 i = 8; 41 } 42 i--; 43 show(); 44 autoPlay(); 45 }) 46 $(".but2").click(function(){ 47 clearInterval(auto); 48 //判断轮播的显示和隐藏 49 if(i == 7){ 50 i = -1; 51 } 52 i++; 53 show(); 54 autoPlay(); 55 }) 56 $(".but3").hover(function(){ 57 i = $(this).index(); 58 show(); 59 clearInterval(auto); 60 },function(){ 61 autoPlay(); 62 }) 63 }) 64 function autoPlay(){ 65 auto = setInterval(function(){ 66 show(); 67 i++; 68 if(i==8){ 69 i = 0; 70 } 71 },2000) 72 } 73 function show(){ 74 $(".tu1").eq(i).fadeIn(700).siblings(".tu1").fadeOut(700); 75 $(".but3").eq(i).addClass("bianse").siblings(".but3").removeClass("bianse") 76 } 77 </script> 78 </body> 79 </html>
CSS页面效果：
1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 body{ 6 background-color: #60a0ff; 7 } 8 #kuang{ 9 position: relative; 10 margin: 20px auto; 11 width: 1280px; 12 height: 720px; 13 } 14 .tu1{ 15 position: absolute; 16 } 17 .but1{ 18 background-color: #ffffff; 19 position: absolute; 20 left: 3%; 21 top:45%; 22 text-align: center; 23 width: 80px; 24 height: 80px; 25 line-height: 80px; 26 color: #ff0000; 27 font-size: 17px; 28 font-weight: bold; 29 border-radius: 20%; 30 transition: 0.6s; 31 } 32 .but2{ 33 background-color: #ffffff; 34 position: absolute; 35 left: 93%; 36 top:45%; 37 border-radius: 10px; 38 text-align: center; 39 width: 80px; 40 height: 80px; 41 line-height: 80px; 42 color: #ff0000; 43 font-size: 17px; 44 font-weight: bold; 45 transition: 0.6s; 46 } 47 #nav{ 48 position: absolute; 49 left: 40%; 50 top:94%; 51 } 52 .but3{ 53 float: left; 54 list-style: none; 55 width: 28px; 56 height: 28px; 57 line-height: 28px; 58 text-align: center; 59 background-color: whitesmoke; 60 overflow: hidden; 61 border-radius: 50%; 62 margin-left: 15px; 63 color: red; 64 } 65 .but1:hover{ 66 background-color: #55aaff; 67 color: #000000; 68 transition: 0.5s; 69 } 70 .but2:hover{ 71 background-color: #55aaff; 72 color: #000000; 73 transition: 0.5s; 74 } 75 .bianse{ 76 background-color: sandybrown; 77 }
js：
使用jquery-3.5.1.js就可以