这篇文章主要介绍“JavaScript怎么实现轮播图”，在日常操作中，相信很多人在JavaScript怎么实现轮播图问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JavaScript怎么实现轮播图”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
html 和 css 代码如下所示（文件名：index.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="animate.js"></script>
<script src="轮播图.js"></script>
<style>
body {
background-color: rgb(151, 147, 147);
}
* {
margin: 0;
padding: 0;
}
div {
overflow: hidden;
position: relative;
width: 500px;
height: 500px;
background-color: skyblue;
margin: 20px auto;
}
ul {
list-style: none;
}
.img {
width: 600%;
position: absolute;
left: 0;
}
li {
float: left;
}
img {
width: 500px;
height: 500px;
}
.yuan>li {
cursor: pointer;
width: 10px;
height: 10px;
background-color: rgb(190, 185, 185);
border-radius: 50%;
margin: 0 5px;
border: 1px solid rgb(119, 114, 114);
}
.yuan {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.yuan .color {
background-color: rgb(228, 135, 135);
}
a {
text-decoration: none;
color: black;
background-color: rgb(112, 111, 111);
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
position: absolute;
top: 50%;
transform: translateY(-50%);
display: none;
}
.left {
left: 0;
}
.right {
right: 0;
}
</style>
</head>
<body>
<div class="box">
<ul class="img">
<li><img src="images/1.webp" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.webp" alt=""></li>
<li><img src="images/4.webp" alt=""></li>
<li><img src="images/5.webp" alt=""></li>
</ul>
<a href="JavaScript:;" rel="external nofollow" rel="external nofollow" class="left"><</a>
<a href="JavaScript:;" rel="external nofollow" rel="external nofollow" class="right">></a>
<ul class="yuan"></ul>
</div>
</body>
</html>这样写好以后，一个基本的样子就算是有了。
接下来就是让他动起来，想想什么可以让图片动起来，是不是我们学过的动画效果呀，所有这个地方要用缓动动画来实现一个切换图片的效果，因为 js 代码较多，所以得新建一个 js 文件，把代码封装起来！
下面就是封装得 js 代码 （文件名：轮播图.js）
window.addEventListener('load', function () {
var img = document.querySelector('.img');
var yuan = document.querySelector('.yuan');
var box = document.querySelector('.box');
var left = document.querySelector('.left');
var right = document.querySelector('.right');
var imgwidth = box.offsetWidth; //获取盒子的宽度（图片的宽度）
// 经过鼠标触发 停止自动滚动图片效果
box.addEventListener('mouseenter', function () {
left.style.display = 'block';
right.style.display = 'block';
clearInterval(timer);
})
// 离开鼠标触发 自动滚动图片再次触发
box.addEventListener('mouseleave', function () {
left.style.display = 'none';
right.style.display = 'none';
timer = setInterval(function () {
right.click();
}, 2000)
})
// 根据图片添加下面的小圆点
for (var i = 0; i < img.children.length; i++) {
var li = document.createElement('li');
yuan.appendChild(li);
li.setAttribute('date-index', i);
li.addEventListener('click', function () {
for (var j = 0; j < yuan.children.length; j++) {
yuan.children[j].className = '';
}
this.className = 'color';
var index = this.getAttribute('date-index');
var imgwidth = box.offsetWidth;
// animate(obj,target,function(){})
animate(img, -index * imgwidth);
nums = index;
colors = index;
})
}
// 默认第一个小圆点有颜色
yuan.children[0].className = 'color';
var nums = 0;
var colors = 0;
// 复制第一张图片到最后,给无缝滚动做准备
var li = img.children[0].cloneNode(true);
img.appendChild(li);
var flag = true;
//右边按钮,切换下一张,小圆点一起变化
right.addEventListener('click', function () {
if (flag) {
flag = false;
if (nums == img.children.length - 1) {
nums = 0;
img.style.left = 0;
}
nums++;
animate(img, -nums * imgwidth, function () {
flag = true;
});
colors++;
if (colors == yuan.children.length) {
colors = 0;
}
for (var j = 0; j < yuan.children.length; j++) {
yuan.children[j].className = '';
}
yuan.children[colors].className = 'color';
}
})
// 左边按钮,切换下一张,小圆点一起变化
left.addEventListener('click', function () {
if (flag) {
flag = false;
if (nums == 0) {
nums = img.children.length - 1;
img.style.left = -nums * imgwidth + 'px';
}
nums--;
colors--;
animate(img, -nums * imgwidth, function () {
flag = true;
});
if (colors < 0) {
colors = yuan.children.length - 1;
}
// if (colors == 0) {
// colors = yuan.children.length;
// }
// colors--;
for (var j = 0; j < yuan.children.length; j++) {
yuan.children[j].className = '';
}
yuan.children[colors].className = 'color';
}
})
// 鼠标不经过图片实现自动滚动
var timer = setInterval(function () {
right.click();
}, 2000)
})关键的来了，要让动起来怎么少得了动画效果呢，我单独封装了一个 js 文件，这样以后写其他案例的时候也可以直接引用了。
代码如下（文件名：animate.js）
function animate(obj, target, callback) { //移动的对象(谁移动)，移动的目的位置，回调函数
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 步长写到定时器里面
var step = (target - obj.offsetLeft) / 10; //步长公式：(目标位置-现在的位置)/10
step = step > 0 ? Math.ceil(step) : Math.floor(step); //步长改为整数，不要出现小数，正数向上取整，负数向下取整
if (obj.offsetLeft == target) {
clearInterval(obj.timer) //停止动画，本质是停止定时器
if (callback) {
callback(); // 回调函数写到定时器结束里面
}
}
//步长作为一个慢慢变小的值才能实现从快到慢的缓动停止的效果
obj.style.left = obj.offsetLeft + step + 'px';
},15)
}到此，关于“JavaScript怎么实现轮播图”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
