利用滚动条实现JS轮播图
注意：请修改图片地址
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin:0; padding:0; list-style: none;}
.wrap{
width: 386px;
height: 272px;
border: 1px solid #000;
margin: 100px auto 0;
position: relative;
}
.main{
width: 386px;
height: 273px;
overflow-x: hidden;
}
.imgs{
width: 6000px;
height: 272px;
}
.imgs img{
width: 386px;
height: 272px;
float: left;
}
.num{
position: absolute;
right: 5px;
bottom: 14px;
z-index: 9999;
}
.num li{
float: left;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
background: #ccc;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
.left{
width: 25px;
height: 25px;
background: url(img/fx1.png) 0 0 no-repeat;
position: absolute;
left: 0;
top: 130px;
cursor: pointer;
z-index: 9999;
}
.right{
width: 25px;
height: 25px;
background: url(img/fx2.png) 0 0 no-repeat;
position: absolute;
right: 0;
top: 130px;
cursor: pointer;
z-index: 9999;
}
.num .show{
background: blue;
color: #fff;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div class="imgs">
<img src="img/05.jpg" alt="">
<img src="img/01.jpg" alt="">
<img src="img/02.jpg" alt="">
<img src="img/03.jpg" alt="">
<img src="img/04.jpg" alt="">
<img src="img/05.jpg" alt="">
<img src="img/01.jpg" alt="">
</div>
</div>
<ul class="num">
<li class="show">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<p class="left"></p>
<p class="right"></p>
</div>
<script>
var imgs = document.querySelectorAll('.imgs img');
var lis = document.querySelectorAll('.num li');
var main = document.querySelector('.main');
var left = document.querySelector('.left');
var right = document.querySelector('.right');
var img1w = imgs[0].clientWidth;//一张图片的宽度
var timer1 = null, timer2 = null;
// var opa = 10;//透明度初始值
var imgIndex = 1;//当前图片的下标
var numIndex = 0;//当前数字的下标
main.scrollLeft = img1w;
autoMove();//进入页面执行自动走
// 1.自动走
function autoMove() {
clearInterval(timer2);
timer2 = setInterval(function () {
imgIndex++;
if (imgIndex >= imgs.length) {
imgIndex = 2;
main.scrollLeft = img1w * (imgIndex-1);
}
lis[numIndex].className = '';
numIndex++;
if (numIndex >= lis.length) {
numIndex = 0;
}
lis[numIndex].className = 'show';
move();
},2000);
}
// 2.点击数字，图片运动到该显示的位置
for (var i = 0; i < lis.length; i++){
lis[i].index = i;
lis[i].onclick = function () {
clearInterval(timer2);//停止自动走
lis[numIndex].className = '';
numIndex = this.index;
imgIndex = this.index + 1;
lis[numIndex].className = 'show';
move();
autoMove();//启动自动走
}
}
// 3.点击右边按钮
right.onclick = function () {
clearInterval(timer2);//停止自动走
imgIndex++;
if (imgIndex >= imgs.length) {
imgIndex = 2;
main.scrollLeft = img1w * (imgIndex-1);
}
lis[numIndex].className = '';
numIndex++;
if (numIndex >= lis.length) {
numIndex = 0;
}
lis[numIndex].className = 'show';
move();
autoMove();//启动自动走
}
// 4.点击左边按钮
left.onclick = function () {
clearInterval(timer2);//停止自动走
imgIndex--;
if (imgIndex < 0) {
imgIndex = imgs.length - 3;//4
main.scrollLeft = img1w * (imgIndex + 1);
}
lis[numIndex].className = '';
numIndex--;
if (numIndex < 0) {
numIndex = lis.length - 1;
}
lis[numIndex].className = 'show';
move();
autoMove();//启动自动走
}
function move() {
var start = main.scrollLeft;//起始位置
var end = img1w * imgIndex;//终点位置
var minStep = 0;//起始步数
var maxStep = 50;//最大步数
var everyStep = (end - start) / maxStep;//每步要走的距离
clearInterval(timer1);
timer1 = setInterval(function () {
minStep++;//每隔15毫秒跑一步
if (minStep == maxStep) {//到达最大步数
clearInterval(timer1);
}
start += everyStep;//每跑一步累加一段距离(everyStep)
main.scrollLeft = start;
},15);
}
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY