航母飞机模拟器
81.76M · 2026-04-07
本篇文章给大家详细介绍一下使用纯CSS、JS实现图片轮播效果的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <!--轮播--> <style> .carousel { width: 648px; height: 400px; margin: 0 auto; text-align: center; position: absolute; left: 24%; /*border: 1px solid red;*/ } .inner { /*border: 12px solid blue;*/ width: 648px; height: 400px; position: absolute; } .inner-img { width: 200px; height: 500px; display: none; /*position: absolute;*/ position: relative; /*top:0;*/ /*left:0;*/ /*z-index:1000;*/ } .inner-img.active { display: block; } .leftBtn, .rightBtn { position: absolute; width: 40px; height: 60px; background: rgba(0, 0, 0, 0.3); /*近乎透明色*/ font-size: 30px; color: #fff; text-align: center; line-height: 60px; cursor: pointer; display: none; } .leftBtn { left: 5px; top: 170px; } .rightBtn { /*right:5px;*/ left: 603px; top: 170px; } .carousel ul { position: absolute; /*left:20px;*/ padding-left: 228px; bottom: 10px; /*z-index: 999;*/ list-style: none; width: 200px; height: 20px; } .carousel ul .page { float: left; width: 18px; height: 18px; line-height: 18px; border-radius: 18px; /*变成圆形*/ background: black; margin-right: 6px; /*距离6个px单位*/ color: #fff; font-size: 14px; /*text-align: center;*/ cursor: pointer; } .carousel ul .page.active { background-color: red; } .carousel p { /*float: left;*/ margin-top: -360px; margin-right: -600%; color: black; text-decoration: none; list-style: none; } </style> </head> <body> <!--轮播--> <p class="carousel"> <p class="inner"> <a href="#" class="inner-img active"><img src="https://s2.ax1x.com/2019/11/06/MCxe0O.jpg" alt="图片加载中" width="648" height="400"></a> <a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCxl9A.jpg" alt="图片加载中" width="648" height="400"></a> <a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCxJnf.jpg" alt="图片加载中" width="648" height="400"></a> <a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCxtHS.jpg" alt="图片加载中" width="648" height="400"></a> <a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCxaNQ.jpg" alt="图片加载中" width="648" height="400"></a> <a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCx6BT.jpg" alt="图片加载中" width="648" height="400"></a> <a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCxW4J.jpg" alt="图片加载中" width="648" height="400"></a> <a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCx43R.jpg" alt="图片加载中" width="648" height="400"></a> <p class="leftBtn"><</p> <!--左按钮--> <p class="rightBtn">></p> <!--右按钮--> </p> <ul> <li class="page active">1</li> <li class="page">2</li> <li class="page">3</li> <li class="page">4</li> <li class="page">5</li> <li class="page">6</li> <li class="page">7</li> <li class="page">8</li> </ul> </p> </body> <script> var carousel = document.getElementsByClassName('carousel')[0], //获取carousel的class类 // 获取所有包含图片的链接 innerImg = document.getElementsByClassName('inner-img'), // 获取左右按钮 btnL = document.getElementsByClassName('leftBtn')[0], btnR = document.getElementsByClassName('rightBtn')[0], // 获取分页器 page = document.getElementsByClassName('page'), num = 0; // 声明变量 初始图片为第一张0 // 声明时间控制函数 var timer = setInterval(moveR, 2500); //调用moveR 时间间隔2.5s // 图片向右轮播 function moveR() { num++; // 变量每3000毫秒递增一次,图片向右轮播 // 如果是最后一张图片的时候从0开始显示 if(num == innerImg.length) { num = 0; } move(); }; // 图片向左轮播 function moveL() { num--; // 每调用一次moveL(),变量递减一次 // 如果是第一张图片，则从最后一张图片开始显示 if(num == -1) { num = innerImg.length - 1; }; move(); } // 图片切换 function move() { // 把所有的innerImg隐藏和page背景全部变成黑色 for(var i = 0; i < innerImg.length; i++) { innerImg[i].style.display = 'none'; page[i].style.background = 'black'; } // 把当前num下标的innerImg显示和page背景变成red innerImg[num].style.display = 'block'; page[num].style.background = 'red'; } // 分页器鼠标滑过时图片切换 for(var i = 0; i < page.length; i++) { // 用来保存下标，page[i].index == 0 / 1 / 2 / 3 /4... page[i].index = i; // console.log(page[i].index); // 因为已经保存好的下边，这里的page[i], page[0], page[1], page[2], page[3] page[i].onmouseover = function() { for(var j = 0; j < page.length; j++) { page[j].style.background = 'black'; innerImg[j].style.display = 'none'; } this.style.background = 'red'; // console.log(this.index);可以查看是多少 innerImg[this.index].style.display = 'block'; num = this.index; } } btnL.onclick = function() { moveL(); } btnR.onclick = function() { moveR(); } // 鼠标划上carousel时让左右按钮显示 并清除时间函数 carousel.onmouseover = function() { // 清除时间函数 clearInterval(timer); //暂停 图片不继续循环 btnR.style.display = 'block'; btnL.style.display = 'block'; } // 鼠标离开carousel时让左右按钮隐藏 carousel.onmouseout = function() { // 开启时间函数 timer = setInterval(moveR, 2500); btnR.style.display = 'none'; btnL.style.display = 'none'; } </script></html>推荐学习：css视频教程
【文章转自t湾大带宽服务器 http://www.558idc.com/tw.html提供，感恩】
我的MCP工具被下载了5000+次/周，从0到变现我做对了什么？
AI 周刊【2026.03.30-04.05】：Anthropic 史诗级乌龙、OpenAI 万亿狂奔、AI 伦理审查
