本文已参与[新人创作礼]活动，一起开启掘金创作之路。
（本文章不做过多的解释，基本上每行JS代码都有对应的注释。）
下面代码，复制粘贴就可以拿过去自己尝试一下啦！不过照片需要你自己更换本地图片。
其中有我个人封装的简单运动animate，其中的animate()函数即是，最下面有该运动的源码，需要一起复制到另一个js文件 并用script标签引入来使用，这封装好的简单运动也建议大家看看噢！
本轮播图的主要操作功能有：
①点击左右按钮更换上下页
②拖拽滚动（必须先阻止浏览器的默认行为才能实现拖拽）
③无限轮播
④自动轮播
⑤点击指示器更换页数
⑥鼠标进入区域停止自动轮播、鼠标移出则回复自动轮播
效果图：
<!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>轮播图</title>
<script src="animate.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
img {
display: block;
}
.box {
width: 600px;
height: 400px;
border: 1px solid black;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.imgBox {
width: 500%;
height: 100%;
display: flex;
position: absolute;
left: 0px;
}
.imgBox li {
width: 600px;
height: 100%;
}
.imgBox li img {
width: 600px;
height: 100%;
}
.lrTabs .prev,.next {
width: 20px;
height: 40px;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgb(61, 61, 61);
text-align: center;
font: 800 20px/40px "宋体";
color: #fff;
cursor: pointer;
z-index: 10;
opacity: .5;
}
.next {
right: 0;
}
.pointBox {
display: flex;
position: absolute;
justify-content: space-between;
/* 没有动态变化的小圆点的样式 */
/* width: 250px; */
/* left: calc(50% - 115px); */
left: calc(50% - 60px);
bottom: 20px;
}
.pointBox li {
/* 没有动态变化的小圆点的样式 */
/* width: 40px;
height: 5px; */
/* border-radius: 12%; */
width: 30px;
height: 4px;
border-radius: 10%;
background-color: #ccc;
cursor: pointer;
margin-right: 10px;
transition: all .9s;
}
.pointBox .active {
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="box">
<ul class="imgBox">
<li class="slider"><img src="./img/02.jpg"></li>
<li class="slider"><img src="./img/03.jpg"></li>
<li class="slider"><img src="./img/07.jpg"></li>
<li class="slider"><img src="./img/09.jpg"></li>
<li class="slider"><img src="./img/10.jpg"></li>
</ul>
<ol class="pointBox"></ol>
<div class="lrTabs">
<a class="prev"><</a>
<a class="next">></a>
</div>
</div>
<script>
var box = document.querySelector(".box")
var ul = document.querySelector(".imgBox")
var prev = document.getElementsByClassName("prev")
var next = document.getElementsByClassName("next")
var lis = document.querySelectorAll(".slider")
var lisWidth = parseFloat(getComputedStyle(lis[0]).width)
var lrTabs = document.querySelector(".lrTabs")
var ol = document.querySelector(".pointBox")
var imgs = document.querySelectorAll("img")
var currentIndex = 1
// 封装切换上一张图的函数
function prev1() {
--currentIndex
animate(
ul, {
left: -lisWidth * currentIndex + "px"
},
500,
function () {
// console.log("动画结束");
// console.log(currentIndex);
onAnimationEnd()
}
)
}
// 封装切换下一张图的函数
function next1() {
++currentIndex
animate(
ul, {
left: -lisWidth * currentIndex + "px"
},
500,
function () {
// console.log("动画结束");
// console.log(currentIndex);
onAnimationEnd()
}
)
}
// 通过事件委托来实现切换上下图的功能
lrTabs.addEventListener(
"click",
function (e) {
if (e.target.className === "next") {
next1()
} else if (e.target.className === "prev") {
prev1()
}
}
)
// 实现指示器随着图片的切换而高亮
var pointers = null
function lightHeightPointers() {
pointers.forEach(
function (p, index) {
if (index === currentIndex - 1) {
p.classList.add("active")
p.style.width = "60px"
p.style.height = "4px"
} else {
p.classList.remove("active")
p.style.width = "30px"
}
}
)
}
// 初始化指示器，即添加指示器
function initPointers() {
var fragment = document.createDocumentFragment()
lis.forEach(
function (l, index) {
var li = document.createElement("li")
fragment.appendChild(li)
}
)
ol.appendChild(fragment)
pointers = document.querySelectorAll("ol>li")
lightHeightPointers()
}
initPointers()
// 初始化无限轮播
function initLoop() {
var head = lis[lis.length - 1].cloneNode(true) // 第五张
var tail = lis[0].cloneNode(true)
ul.appendChild(tail)
ul.insertBefore(head, lis[0])
// 获取ul里的最新全部的li
var sliders = document.querySelectorAll("ul>li")
// 根据添加了最新的li来重新定义ul的宽度
ul.style.width = lisWidth * sliders.length + "px"
ul.style.left = -lisWidth + "px"
}
initLoop()
// 动画结束回调，真5跳假5，假1跳真1
function onAnimationEnd() {
currentIndex >= 6 && (currentIndex = 1)
currentIndex <= 0 && (currentIndex = 5)
ul.style.left = -lisWidth * currentIndex + "px"
lightHeightPointers()
}
// 实现 自动轮播
var timer = null
// 开始自动轮播
function startAutoPlay() {
if (!timer) {
timer = setInterval(function () {
next1()
}, 3000)
}
}
startAutoPlay()
// 停止自动轮播
function stopAutoPlay() {
if (timer) {
clearInterval(timer)
timer = null
}
}
// 实现鼠标移入停止、鼠标移出后继续自动轮播的功能
box.onmouseenter = function (e) {
stopAutoPlay()
}
box.onmouseleave = function (e) {
startAutoPlay()
}
// 实现点击指示器切换幻灯片功能
function clickPointers() {
pointers.forEach(
function (p, index) {
p.onclick = function () {
currentIndex = index + 1
ul.style.left = -lisWidth * currentIndex + "px"
lightHeightPointers()
}
}
)
}
clickPointers()
// 阻止浏览器默认行为
imgs.forEach(
function (img, index) {
img.addEventListener(
"mousedown",
function (e) {
e.preventDefault()
}
)
}
)
/* 拖拽 */
// 标记是否正在拖拽
var isDragging = false
// 记录鼠标按下时的x位置
var downX = null
// 记录鼠标按下时ul的left值
var downUlLeft = null
/* 在ul身上按下鼠标,此处的对象要改成最大的div盒子即包含有左右tab的box，因为如果对象为ul时点击左右tab并且tab不属于ul的里面，所以系统会认为鼠标没有按下去但是鼠标松手的对象又是页面，所以会触发鼠标抬起的函数并导致downX的值为null */
box.onmousedown = function (e) {
// 标记开始拖拽
isDragging = true
// 同时记录鼠标按下的位置 + ul的初始left
downX = e.pageX
// console.log("downx","=",e.pageX);
downUlLeft = parseFloat(ul.style.left)
// console.log("此处是在onmousedown上按下鼠标");
}
/* 鼠标在任意位置撒手 */
document.onmouseup = function (e) {
// 不再拖拽ul
isDragging = false
// 获取鼠标的总偏移量
var offsetX = e.pageX - downX
// console.log("此处是在onmouseup上松开的鼠标");
// console.log(e.pageX);
// console.log(downX);
// console.log(offsetX);
/* 分情况讨论：上一下 OR 下一张 OR 还原拖拽前位置 */
switch (true) {
// 往右狂扫
case offsetX >= lisWidth / 3:
prev1()
break;
// 往左狂扫
case offsetX <= -lisWidth / 3:
next1()
break;
// case offsetX = 0:
// break;
// 有气无力地扫了一点点：还原扫前位置
default:
ul.style.left = -lisWidth * currentIndex + "px"
break;
}
}
/* 拖拽ul */
ul.onmousemove = function (e) {
// 如果鼠标已经down下
if (isDragging) {
// 鼠标的当前位置距离down下时的偏移量
var offsetX = e.pageX - downX
// 鼠标偏移量即ul的left偏移量
ul.style.left = downUlLeft + offsetX + "px"
// console.log("此处是在ul上拖拽鼠标");
}
}
</script>
</body>
</html>
