轮播图(简易)
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9 10 <style> 11 .container { 12 height: 300px; 13 width: 500px; 14 margin: 10px auto; 15 overflow: hidden; 16 position: relative; 17 } 18 19 .container .carousel img { 20 height: 300px; 21 width: 500px; 22 } 23 24 .container .carousel { 25 width: 100%; 26 height: 100%; 27 display: flex; 28 transition: 0.5s; /* 切换时平滑一些 */ 29 } 30 31 .container .idicator { 32 display: flex; 33 position: absolute; 34 bottom: 10px; 35 left: 50%; 36 transform: translateX(-50%); 37 height: 15px; 38 39 } 40 41 .container .idicator span { 42 border: 1px solid #ccc; 43 width: 15px; 44 height: 15px; 45 margin-left: 5px; 46 border-radius: 50%; 47 } 48 49 .container .idicator .active { 50 background: #ccc; 51 ; 52 } 53 </style> 54 </head> 55 56 <body> 57 <div class="container"> 58 <div class="carousel"> 59 <div class="item"><img src="../vue/image/1087.jpg" alt="" class="width-height"></div> 60 <div class="item"><img src="../vue/image/3046.jpg_wh300.jpg" alt="" class="width-height"></div> 61 <div class="item"><img src="../vue/image/3247.jpg_wh300.jpg" alt="" class="width-height"></div> 62 <div class="item"><img src="../vue/image/1091.jpg" alt="" class="width-height"></div> 63 <div class="item"><img src="../vue/image/5041.jpg_wh300.jpg" alt="" class="width-height"></div> 64 </div> 65 66 <div class="idicator"> 67 <span class="active"></span> 68 <span></span> 69 <span></span> 70 <span></span> 71 <span></span> 72 </div> 73 74 </div> 75 76 <script type="text/javascript"> 77 let carousel = document.querySelector('.carousel'); 78 let idicators = document.querySelectorAll('.idicator span'); 79 80 idicators.forEach(function (item, i) { 81 item.onclick = function(){ 82 moveTo(i); 83 } 84 }); 85 86 // 移动版块到第几个 87 function moveTo(index) { 88 89 carousel.style.transform = 'translateX(-' + index + '00%)'; 90 // carousel.style['-webkit-transform'] = 'translateX(-' + index + '00%)'; 91 92 // 去掉当前选中的 93 var active = document.querySelector('.idicator .active'); 94 active.classList.remove('active'); 95 96 // 重新设置 97 idicators[index].classList.add('active'); 98 } 99 </script> 100 </body> 101 102 </html>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」