原生JS实现轮播图
该案例实现效果：
- 图片自动播放
- 当鼠标经过图片时，停止播放
- 点击左右箭头按钮，实现图片左右切换，每一个小圆点也随之变化
- 点击底部中间圆点按钮，实现图片任意切换
- 图片的切换对应小圆点的样式变化，即每一个小圆点对应一张图片
1.html格式
<div class="banner">
<img src="./1.jpg" id="pic" alt="">
<ul class="slide-nav">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="left"><</div> //此处最好改为图片格式的左右箭头
<div class="right">></div>
</div>
2.CSS样式
简单的CSS样式
.banner {
position: relative;
width: 331px;
height: 195px;
margin: 80px auto;
}
.slide-nav {
position: absolute;
bottom: 0%;
left: 50%;
margin-left: -62px;
}
.slide-nav li {
float: left;
background-color: #b5c0cb; //灰色
list-style: none;
width: 8px;
height: 8px;
margin-left: 7px;
border-radius: 8px;
cursor: pointer;
}
.slide-nav .on {
background-color: #2fbc71; //绿色
}
.left {
position: absolute;
top: 50%;
left: 0;
margin-top: -20px;
font-weight: 1200;
font-size: 40px;
cursor: pointer;
}
.right {
position: absolute;
top: 50%;
right: 0;
margin-top: -20px;
font-weight: 1200;
font-size: 40px;
cursor: pointer;
}
效果图:
3.js部分
1、获取相关标签存入变量中
var arr = ["./1.jpg", "./2.jpg", "./3.jpg", "./4.jpg"]; //轮播的图片存入数组中
var lis = document.getElementsByTagName('li'); //获取是数组，存放4个li
var pic = document.getElementById("pic"); //获取img标签
var banner = document.querySelector(".banner"); //获取div盒子
var left = document.querySelector(".left"); //获取左右箭头按钮
var right = document.querySelector(".right");
2、首先实现图片轮播
实现思路：设置事件让img标签的图片地址改变，就可以实现图片轮播。
- 设置图片数组（arr）的初始索引为0
var num = 0; - 添加定时器，让图片数组的索引自动变化+1
- 让img标签的地址等于图片数组的地址
pic.src = arr[num]; - 当图片数组的索引增加到大于等于数组长度时，图片将无法显示。 因为图片数组只存放四张图片，所以当索引等于数组长度时，将索引等于0，既从第一张图片开始显示
if (num == arr.length) { num = 0; }
var num = 0;
function slide() {
num++;
if (num == arr.length) {
num = 0;
}
pic.src = arr[num];
}
var timer = setInterval(slide, 1000);
3. 实现图片的切换对应小圆点的样式变化，即每一个小圆点对应一张图片
实现思路：
- 先用排他思想，将所有li的on类标签去掉
- 显示图片数组的第几张图片，就让li的on类标签添加到当前li上
var num = 0;
function slide() {
num++;
if (num == arr.length) {
num = 0;
}
pic.src = arr[num];
for (var i = 0; i < lis.length; i++) {
lis[i].classList.remove('on'); //排他思想
} //显示图片数组的第几张图片，
lis[num].classList.add('on'); //就让li的on类标签添加到当前li上
}
var timer = setInterval(slide, 1000); //定时器，每经过1000ms调用一次slide函数
4.当鼠标经过图片时，停止播放
实现思路：
- 当鼠标经过banner盒子时，停止定时器
- 当鼠标离开banner盒子时，开启定时器
banner.onmouseover = function () {
clearInterval(timer); //停止定时器
}
banner.onmouseout = function () {
timer = setInterval(slide, 1000); //开启定时器
}
5.点击左右箭头按钮，实现图片左右切换，每一个小圆点也随之变化
实现思路：
- 当点击左箭头时，使图片数组的索引减1，当索引等于-1时，再使索引变为数组长度-1
- 再让img标签的地址等于图片数组的地址
pic.src = arr[num]; - 最后小圆点也随图片变化，即每一个小圆点对应一张图片的效果添加上去
- 反之，当点击右箭头时，使图片数组的索引加1，当索引等于数组长度时，再使索引变为0，其他与左箭头效果一样。既就是slide函数的效果
left.onclick = function () {
num--;
if (num == -1) {
num = arr.length - 1;
}
pic.src = arr[num]; //此处实现的代码与上面一样
for (var i = 0; i < lis.length; i++) { //可以放入slide_li函数中调用
lis[i].classList.remove('on'); //以减少代码量
}
lis[num].classList.add('on');
}
right.onclick = function () { //点一次right调用一次slide函数
slide()
6.点击底部中间圆点按钮，实现图片任意切换
实现思路：
- 当点击某个li按钮时，把当前li的索引值赋给图片数组的索引
- 再使图片自动轮播，小圆点也随图片变化
for (var i = 0; i < arr.length; i++) {
lis[i].index = i; //给四个li设置索引号，这是同步事件先执行
lis[i].onclick = function () {
num = this.index; //this指向的是事件函数的调用者
slide_li();
}
}
7. js部分的全部代码
<script>
var arr = ["./1.jpg", "./2.jpg", "./3.jpg", "./4.jpg"];
var lis = document.getElementsByTagName('li');
var pic = document.getElementById("pic");
var banner = document.querySelector(".banner");
var left = document.querySelector(".left");
var right = document.querySelector(".right");
var num = 0;
function slide() {
num++;
if (num == arr.length) {
num = 0;
}
slide_li();
}
function slide_li() {
pic.src = arr[num];
for (var i = 0; i < lis.length; i++) {
lis[i].classList.remove('on');
}
lis[num].classList.add('on');
}
var timer = setInterval(slide, 1000);
//滑过停止
banner.onmouseover = function () {
clearInterval(timer);
}
banner.onmouseout = function () {
timer = setInterval(slide, 1000);
}
//左右箭头
left.onclick = function () {
num--;
if (num == -1) {
num = arr.length - 1;
}
slide_li();
}
right.onclick = function () {
slide();
}
//底部导航
for (var i = 0; i < arr.length; i++) {
lis[i].index = i;
lis[i].onclick = function () {
num = this.index;
slide_li();
}
}
</script>
