原生js实现多个功能轮播图
原生js实现轮播图
今天突然不想学习新的知识了，就闲下来自己把之前学的东西再过一遍把，好了废话不多说了，开始今天的主题。
用原生js实现轮播图的案例，希望对大家还是有点帮助的吧，
效果图如下（虽然知道做的很丑，但是基本功能还是实现了）
轮播图的主要功能有以下几点
- 鼠标经过轮播图，左右按钮显示与隐藏
- 轮播图小圆圈的点击功能（其实吧这个小圆圈的功能还是挺多的）
- 左右按钮的点击播放图片功能
- 自动播放功能
下面就开始从每个功能开始说起吧，当然还是得先看看结构，毕竟结构决定功能嘛
<div class="box">
<!-- 核心滚动区域 -->
<ul class="tupian">
<li>
<a href="#"><img src="./img/fenjin0.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./img/fenjin1.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./img/fenjin2.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./img/fenjin3.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./img/fenjin4.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./img/fenjin5.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./img/fenjin6.jpg" alt=""></a>
</li>
</ul>
<!-- 左按钮 -->
<a href="javascript:;" class="arr_l"><</a>
<!-- 右按钮 -->
<a href="javascript:;" class="arr_r">></a>
<!-- 小圆点 -->
<ol class="curront">
</ol>
</div>
css部分
* {
margin: 0;
padding: 0;
}
/* 父盒子 */
.box {
position: relative;
width: 500px;
height: 375px;
margin: 100px auto;
overflow: hidden;
}
.arr_l,
.arr_r {
position: absolute;
top: 160px;
width: 20px;
height: 30px;
background-color: pink;
background: rgba(0, 2, 2, 0.5);
text-align: center;
}
a {
text-decoration: none;
}
/* 右按钮 */
.arr_r {
display: none;
color: bisque;
left: 480px;
border-radius: 10px 0 0 10px;
}
/* 左按钮 */
.arr_l {
display: none;
color: bisque;
left: 0;
border-radius: 0 10px 10px 0;
}
li {
list-style-type: none;
}
.curront {
position: absolute;
top: 320px;
left: 50%;
margin-left: -60px;
width: 190px;
height: 22px;
background: rgba(172, 167, 167, 0.5);
border-radius: 5px;
}
/* 图片 必须得有定位*/
.box .tupian {
position: relative;
top: 0;
left: 0;
width: 800%;
height: 375px;
}
/* 让所有的图片排程一排，方便添加缓动动画 */
.box ul li {
float: left;
/* 小圆点 */
}
/* 小圆圈的样式 */
.curront li {
float: left;
margin: 5px;
width: 16px;
height: 16px;
background-color: #fff;
border-radius: 8px;
cursor: pointer;
}
/* 添加小圆圈类 */
.change {
background-color: red!important;
}
功能 1：
鼠标经过经过box盒子让里面的ul显示与隐藏
box.addEventListener('mouseenter', function() {
arr_l.style.display = 'block';
arr_r.style.display = 'block';
//鼠标经过清除定时器
clearInterval(time);
time = null; //并且清空定时器变量
});
box.addEventListener('mouseleave', function() {
arr_l.style.display = 'none';
arr_r.style.display = 'none';
功能 2：
小圆圈的点击之后当前li添加change类，其余的移除，排他思想,其实这里我ol里面的li是我动态生成的，以免以后写死了之后修改图片的个数会影响下面li的个数，通过拿到图片的个数来确实ol中li的个数，这样方便以后自己随便添加图片而不会修改圆圈个数
//让下面的小圆圈跟着图片的个数来变
var tupian = document.querySelector('.tupian');
var ol = document.querySelector('.curront')
// console.log(tupian.children.length);
//遍历循环图片的个数
for (var i = 0; i < tupian.children.length; i++) {
//动态创建li
var li = document.createElement('li');
//记录当前小圆圈的索引号,通过自定义属性来做
li.setAttribute('index', i);
//把li添加到ol里面
ol.appendChild(li);
//功能2 小圆圈的功能
// 点击小圆圈变色（排他思想）
li.addEventListener('click', function() {
//点击之前让左右按钮先隐藏
arr_l.style.display = 'none';
arr_r.style.display = 'none';
//干掉其他人
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
//留下自己 设置change类
this.className = 'change';
当我们点击了当前li就让对应的图片显示出来，通过拿到当前图片的索引号，从而来确定到底显示那张图片，li是通过排他思想来实现的，图片的播放是通过缓动动画来实现的，以下是我自己封装的动画
function animate(obj, target, callback) {
//传参数的时候可以跟回掉函数，该函数在定时器结束的时候调用
//性能优化 这里不用声明变量直接用对象的属性的形式赋值给定时器
//可以给不同的元素添加不同的定时器
clearInterval(obj.timer); //可以使每次点击之前都会清除上一次的定时器
//匀速动画：当前的位置+固定的值
//缓动动画：当前位置+变化的值（目标位置-当前位置）/10
//缓动动画原理
//（目标值-当前位置）/10=每次的步长
obj.timer = setInterval(function() {
//步长值写在定时器的里面
var step = (target - obj.offsetLeft) / 10
if (step > 0) {
step = Math.ceil(step)
} else {
step = Math.floor(step)
}
if (obj.offsetLeft == target) {
//停止动画，停止定时器
clearInterval(obj.timer);
//判断是否有回掉函数
if (callback) {
// 调用回掉函数
callback();
}
}
//目标位置=当前位置+步长值
obj.style.left = obj.offsetLeft + step + 'px';
}, 30)
}
三个参数 obj 要做动画的对象，target 目标位置，也就是移动距离，callback回掉函数是在动画做完之后进行的回掉
功能 3：
点击左右按钮让对应图片播放
//点击右侧按钮让图片滚动一次 声明个flag变量来记录点击次数
var flag = 0;
//声明变量num，点击按钮让小圆圈跟着添加change类，其余移除
var num = 0;
//声明open节流阀变量
var open = true;
arr_r.addEventListener('click', function() {
if (open) {
open = false;
//如果滚动到最后一张图片则把ul的长度重新赋值为0，并且flag变量也为0
if (flag == ul.children.length - 1) {
ul.style.left = 0;
flag = 0;
}
num++;
flag++;
animate(ul, -flag * box.offsetWidth, function() {
open = true;
})
//如果num===5的话就说明已经走到我们克隆的那张图片了，所以要重新给num赋值为0
if (num === ul.children.length - 1) {
num = 0;
}
//调用函数
circlechange();
}
})
这里之所以声明两个变量的目的就是为了记录当前点击的按钮拿到当前的索引号
和小圆圈的索引号进行匹配，以至于能达到通过点击按钮来控制小圆圈的播放
左右按钮基本差别不大，做法类似（唯一的区别就是第一张图片和最后一张图片的缓动动画问题）
这里我发现了一个问题就是但我快速点击左右按钮时，图片播放的很快，这时我用到了节流阀，通过缓动函数的callback来实现的，只有当上一次动画播放完了才会执行callback里面的函数，节流阀的目的是在需要的时候开启或者关闭
功能 4：
最后一个功能就是自动播放，我发现这个功能和我点击右侧按钮的功能一样，所以我就直接在定时器中调用了点击右侧按钮这个函数
//自动播放功能
var time = setInterval(function() {
//这时我发现自动播放原理和点击右侧按钮原理一样，所以手动调用了arr_r.click();
arr_r.click();
}, 3000)
到此轮播图的基本功能都写完了，希望对你们有所帮助。