JS实现自动播放匀速轮播图攻略
需求分析
我们需要实现一个图片自动播放的功能，并且播放速度匀速，不会因为帧率的问题出现卡顿等问题。我们需要完成以下需求：
- 图片从左往右轮播；
- 图片循环播放；
- 图片播放的速度需要匀速；
- 用户可以手动控制图片的播放。
实现过程
1. HTML结构
我们需要先确定HTML结构，以下是一个基本的HTML结构：
<div class="container">
<ul class="img-box">
<li><img src="img/img1.jpg"></li>
<li><img src="img/img2.jpg"></li>
<li><img src="img/img3.jpg"></li>
<li><img src="img/img4.jpg"></li>
</ul>
<div class="prev-btn"></div>
<div class="next-btn"></div>
</div>
在这个HTML结构中，我们需要一个包裹整个轮播图的父容器，一个存放图片的<ul>元素以及两个按钮用于控制图片的自动播放。
2. CSS样式
我们需要为轮播图的组件设置CSS样式，这里我们只给出最基本的样式：
/* 外层容器 */
.container {
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
}
/* 图片列表 */
.img-box {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 400%;
list-style: none;
}
/* 图片项 */
.img-box li {
float: left;
height: 100%;
width: 25%;
}
/* 图片 */
.img-box li img {
max-width: 100%;
height: auto;
}
/* 控制按钮 */
.prev-btn, .next-btn {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
background-color: #333;
position: absolute;
top: 50%;
margin-top: -25px;
z-index: 999;
cursor: pointer;
}
.prev-btn {
left: 0;
}
.next-btn {
right: 0;
}
在这里，我们为父容器设置了宽度和高度，并通过overflow: hidden属性隐藏了超出容器范围的内容，为图片列表设置了position:absolute属性，使得图片可以通过改变left属性来实现左右滚动的效果，为了实现循环播放，我们需要将图片列表的宽度设置为总图片宽度的四倍。此外，我们为控制按钮设置了样式。
3. JS实现
3.1 获取元素
我们需要用JS获取我们需要的元素：
const container = document.querySelector('.container');
const imgBox = document.querySelector('.img-box');
const imgList = document.querySelectorAll('.img-box li');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
3.2 自动播放
我们需要编写一个函数用于在一定时间间隔内实现图片的自动播放：
let index = 0;
let interval;
function autoPlay() {
interval = setInterval(() => {
index++;
move(index);
}, 3000);
}
首先，我们通过index变量来标记当前显示图片的索引，interval变量用于存储我们采用的计时器实例。在autoPlay函数中，我们使用了setInterval函数来实现轮播图的主要功能：每隔3秒更新一次index并调用move函数切换图片。
3.3 切换图片
在此之前，我们需要编写一个函数用于计算切换后的left值：
function calcLeft(index) {
return -index * (100 / imgList.length);
}
在calcLeft函数中，我们根据当前图片索引和图片总数计算出了应该显示的left值。
接下来，我们需要编写move函数，并调用calcLeft函数来计算left值并通过transform样式属性实现动画效果：
function move(index) {
let left = calcLeft(index);
imgBox.style.transform = `translate3d(${left}%, 0, 0)`;
}
3.4 控制按钮
接下来，我们需要编写点击按钮切换图片的函数：
prevBtn.addEventListener('click', () => {
index--;
move(index);
});
nextBtn.addEventListener('click', () => {
index++;
move(index);
});
在这里，我们通过给上一页和下一页按钮添加点击事件监听器，在点击事件中更新index并调用move函数切换图片。
3.5 完整代码示例
<div class="container">
<ul class="img-box">
<li><img src="img/img1.jpg"></li>
<li><img src="img/img2.jpg"></li>
<li><img src="img/img3.jpg"></li>
<li><img src="img/img4.jpg"></li>
</ul>
<div class="prev-btn"></div>
<div class="next-btn"></div>
</div>
<style>
/* 外层容器 */
.container {
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
}
/* 图片列表 */
.img-box {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 400%;
list-style: none;
}
/* 图片项 */
.img-box li {
float: left;
height: 100%;
width: 25%;
}
/* 图片 */
.img-box li img {
max-width: 100%;
height: auto;
}
/* 控制按钮 */
.prev-btn,
.next-btn {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
background-color: #333;
position: absolute;
top: 50%;
margin-top: -25px;
z-index: 999;
cursor: pointer;
}
.prev-btn {
left: 0;
}
.next-btn {
right: 0;
}
</style>
<script>
// 获取元素
const container = document.querySelector('.container');
const imgBox = document.querySelector('.img-box');
const imgList = document.querySelectorAll('.img-box li');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
// 自动播放
let index = 0;
let interval;
function autoPlay() {
interval = setInterval(() => {
index++;
move(index);
}, 3000);
}
// 切换图片
function calcLeft(index) {
return -index * (100 / imgList.length);
}
function move(index) {
let left = calcLeft(index);
imgBox.style.transform = `translate3d(${left}%, 0, 0)`;
}
// 控制按钮
prevBtn.addEventListener('click', () => {
index--;
move(index);
});
nextBtn.addEventListener('click', () => {
index++;
move(index);
});
// 启动自动播放
autoPlay();
</script>
示例说明
示例1
此处我们使用了translate3d属性实现了动画效果。在函数autoPlay中，我们使用了setInterval函数来实现轮播图的主要功能：每隔3秒更新一次index并调用move函数切换图片。在move函数中，我们根据当前图片索引和图片总数计算出了应该显示的left值，并通过transform样式属性实现动画效果。在点击按钮时，我们更新index并调用move函数切换图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例1</title>
<style>
/* 外层容器 */
.container {
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
}
/* 图片列表 */
.img-box {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 400%;
list-style: none;
}
/* 图片项 */
.img-box li {
float: left;
height: 100%;
width: 25%;
}
/* 图片 */
.img-box li img {
max-width: 100%;
height: auto;
}
/* 控制按钮 */
.prev-btn,
.next-btn {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
background-color: #333;
position: absolute;
top: 50%;
margin-top: -25px;
z-index: 999;
cursor: pointer;
}
.prev-btn {
left: 0;
}
.next-btn {
right: 0;
}
</style>
</head>
<body>
<div class="container">
<ul class="img-box">
<li><img src="img/img1.jpg"></li>
<li><img src="img/img2.jpg"></li>
<li><img src="img/img3.jpg"></li>
<li><img src="img/img4.jpg"></li>
</ul>
<div class="prev-btn"></div>
<div class="next-btn"></div>
</div>
<script>
const container = document.querySelector('.container');
const imgBox = document.querySelector('.img-box');
const imgList = document.querySelectorAll('.img-box li');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
// 自动播放
let index = 0;
let interval;
function autoPlay() {
interval = setInterval(() => {
index++;
move(index);
}, 3000);
}
// 切换图片
function calcLeft(index) {
return -index * (100 / imgList.length);
}
function move(index) {
let left = calcLeft(index);
imgBox.style.transform = `translate3d(${left}%, 0, 0)`;
}
// 控制按钮
prevBtn.addEventListener('click', () => {
index--;
move(index);
});
nextBtn.addEventListener('click', () => {
index++;
move(index);
});
// 启动自动播放
autoPlay();
</script>
</body>
</html>
示例2
此处我们使用了CSS3的过渡效果实现了动画效果。在函数autoPlay中，我们通过给图片列表设置过渡效果来实现动画效果。在函数move中，我们通过给图片列表设置left值来实现图片的切换。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例2</title>
<style>
/* 外层容器 */
.container {
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
}
/* 图片列表 */
.img-box {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 400%;
list-style: none;
transition: all .5s;
}
/* 图片项 */
.img-box li {
float: left;
height: 100%;
width: 25%;
}
/* 图片 */
.img-box li img {
max-width: 100%;
height: auto;
}
/* 控制按钮 */
.prev-btn,
.next-btn {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
background-color: #333;
position: absolute;
top: 50%;
margin-top: -25px;
z-index: 999;
cursor: pointer;
}
.prev-btn {
left: 0;
}
.next-btn {
right: 0;
}
</style>
</head>
<body>
<div class="container">
<ul class="img-box">
<li><img src="img/img1.jpg"></li>
<li><img src="img/img2.jpg"></li>
<li><img src="img/img3.jpg"></li>
<li><img src="img/img4.jpg"></li>
</ul>
<div class="prev-btn"></div>
<div class="next-btn"></div>
</div>
<script>
const container = document.querySelector('.container');
const imgBox = document.querySelector('.img-box');
const imgList = document.querySelectorAll('.img-box li');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
// 自动播放
let index = 0;
let interval;
function autoPlay() {
interval = setInterval(() => {
index++;
move(index);
}, 3000);
}
// 切换图片
function calcLeft(index) {
return -index * (100 / imgList.length);
}
function move(index) {
let left = calcLeft(index);
imgBox.style.left = `${left}%`;
}
// 控制按钮
prevBtn.addEventListener('click', () => {
index--;
move(index);
});
nextBtn.addEventListener('click', () => {
index++;
move(index);
});
// 启动自动播放
autoPlay();
</script>
</body>
</html>
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现自动播放匀速轮播图 - Python技术站
微信扫一扫 
支付宝扫一扫 