前言：先滑到最后查看效果展示是否自己有必要继续。
目录
案例介绍
这个案例的目的是利用js实现轮播图的自动轮播、切换以及暂停和恢复轮播功能。案例中除了主角js外还使用了bootstrap的css文件，它只用来构建了导航栏，轮播图部分的自动轮播、暂停和恢复功能是利用定时器实现的。
项目结构
项目虽说是小项目但是我本人是一个强迫症患者，所以还是得层次分明，合理规划。本案例项目结构如下：
这个案例是利用vscode这个工具来做的，是一个不错的编程工具，可以装很多实用的插件。项目结果如左图所示：其中css文件夹里装的就是导航栏需要的bootstrap的css文件和页面轮播图及切换图标和其它部分的css样式文件；img文件夹中装的是轮播背景图以及页面图标和轮播图左右切换图标；剩下的js文件夹里是用到的js文件，bootstrap.min.js可以不用，我只是为了后期其它案例准备的；最后一个html文件就是页面的结构文件。
相关代码展示（不展示的就是自己可以准备的，就没必要展示了）
1 slide_pic.html（页面结构）
知识点提示：页面中的导航栏header部分和两个轮播图切换部分的布局采用了相对定位（父级元素）+绝对定位（目标元素）的方式，让它们具有层次感，在页面中不占位置，可以完成一个不错的布局效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS实现可切换轮播图</title>
<!-- Bootstrap官网中的原话：
Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 这里是引入html页面图标（就是我们打开页面时最上面那个页面卡片的小图标） -->
<link rel="icon" href="img/js_facion.jpg">
<!-- 引入必须的css文件，这里因为需要用到bootstrap里面的导航组件，所以也要引入相应的css文件
如果打算只用html和css写导航栏那就不用引入它了 -->
<link rel="stylesheet" href="./css/slide_pic.css">
<link href="./css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- 引入必须的js文件 -->
<script type="text/javascript" src="./js/slide_pic.js"></script>
<!-- <script src="./js/bootstrap.min.js"></script> -->
</head>
<body>
<!-- 整个轮播图部分 -->
<div class="box" id="box">
<!-- 导航栏部分 -->
<header>
<!-- 下面从整个ul及里面的东西都是bootstrap里拿过来的，有时这也是一种节约时间的小技巧，
但是是在你明白代码的前提下！ -->
<ul class="nav">
<li class="active">
<a href="#">首页</a>
</li>
<li class="divider-vertical"></li>
<li><a href="#">Link</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Link</a></li>
</ul>
</header>
<!-- <p id="info"></p> -->
<!-- 提示部分，就是页面中间的英文欢迎字样，临时兴起而已，可以不使用 -->
<div class="tip">
Welcome!
</div>
<!-- 轮播图的核心部分html，第一行是轮播图，第2、3行是左右两边切换的图标部分 -->
<img id="imgs" src="img/fj1.jpg" alt="">
<i id="prev"><img src="./img/left_slide.png" alt=""></i>
<i id="next"><img src="./img/right_slide.png" alt=""></i>
</div>
</body>
</html>2 slide_pic.css（样式效果）
知识点提示：在本案例样式效果中要注意元素的绝对布局设置，如果经常用到那应该不会遇到这个坑：有时候多个元素用到了绝对定位，但是有一些页面中没有效果，用F12按出的调试工具找到了元素但是就是没显示，注意了，这个原因可能是层级错乱（自己编的），你可以用下面标记部分的方式尝试一下，目的是让这个元素的层级优先级最高，让它显示在最上层，这样就会显示出来了。
* {
margin: 0 auto;
padding: 0;
}
.box {
position: relative;
text-align: center;
height: 623px;
}
.box>.tip {
width: 100px;
height: 50x;
color: #ff6700;
font-size: 40px;
font-weight: 700;
opacity: .6;
position: absolute;
top: 35%;
left: 42%;
z-index: 999;
}
header {
position: absolute;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 50px;
background-color: white;
opacity: .6;
}
.nav {
float: left;
height: 50px;
width: 20%;
background-color: #ff6700;
opacity: .8;
}
.nav>li {
float: left;
height: 100%;
}
.nav a {
height: 100%;
padding-top: 15px !important;
padding-bottom: 15px !important;
}
img {
/* padding: 0px 20px 0px 20px; */
width: 100%;
height: 100%;
cursor: pointer;
position: relative;
}
#info {
font-size: 14px;
color: #818181;
letter-spacing: 0.2em;
}
span {
color: #ff6700;
font-weight: 600;
}
button {
outline: none;
border-color: skyblue;
}
#prev {
width: 40px;
height: 50px;
/* background-color: black; */
position: absolute;
left: 0;
top: 45%;
cursor: pointer;
}
#next {
width: 40px;
height: 50px;
position: absolute;
right: 0;
top: 45%;
cursor: pointer;
}
#prev>img,
#next>img {
opacity: 0.5;
transition: all .2s;
}
#prev>img:hover,
#next>img:hover {
opacity: 1;
}
.box:hover img {
opacity: 1 !important;
}3 slide_pic.js （页面交互效果）
知识点提示：这个js文件就是本案例的核心了，代码介绍下面的代码里有，这里我讲一下实现思路（代码注释里找相应编号就可以对照了）：
（1）实现左右图标的切换功能
既然是切换那就需要点击事件来触发，不过在事件函数外面我们需要定义一个变量(index)来存放背景图路径的数组变量(imgArr)的索引，然后在点击事件中我们用到了自增和自减，注意这里有的同志可能会踩一个坑：会去先在函数中写一个for循环，这个就完蛋了！在你写完后会发现没报错但是就是没效果（有bug），原因就是这个for循环是多余的，你的本意是利用循环来遍历背景图路径数组imgArr的元素，但是下一步的index++或index--就已经有点循环的意思了，只不过我们在它们的临界点设了判断，那就是一个另类的循环了（你品一下！），例如index++是实现数组索引的自增（结合后面的代码，功能就是根据index值的变化实现切换到下一张图片），但是最终它会出现一个问题：index的值大于数组元素的最大索引(imgArr.length-1）怎么办，这样就会出现bug，所以需要设立判断：如果大于了临界值那就让它从头开始！令index=0，这样就形成了一个另类的循环，从而解决了问题。
（2）实现轮播图自动轮播的功能（不需要手动切换）
这个功能我用到了定时器，主要是因为我之前用动画试过，但是头有点大，所以就暂时放弃了。。。，定时器的话就是页面一刷新就开始执行了，正好符合需求，有时候我们逛商城页面就会看见一打开页面就自动切换的轮播图。定时器里面也简单就是把之前需手动切换轮播图的点击事件中的代码拿过来就行了，后面加一个定时器的时间参数，让轮播图自动2.5s切换一次，不过注意这里的定时器用的是setInterval，其实还有另外一个定时器setTimeOut，不过它们用法不同。
注意：这里的定时器我把它赋给了一个变量，因为后面实现暂停轮播图后的恢复轮播效果要用到。
（3）实现轮播图的暂停和恢复效果
轮播图的暂停效果（即鼠标放到轮播图上就暂停轮播图，方便用户查看相应轮播图的内容），用到了定时器的另外一个使用：停止定时器，我们用了一个判断来停止定时器：如果用户的鼠标放在了轮播图的图片img元素上，那就停止轮播图。如果鼠标没在img上就恢复轮播。这两个判断的实现是用了js中的鼠标事件mouseover(鼠标放在元素上)和mouseleave(鼠标离开元素)。
注意：在恢复轮播效果的实现中会遇到坑：我当时是直接把之前的定时器事件复制了一遍，发现出bug了：轮播图停了之后就恢复不了了，之后通过查阅一些博客才知道这里需要再把定时器事件赋值给之前的定时器事件赋过值的变量time1，这样就没有歧义了，就是同一个东西（相当于平时的房间里的灯的开关，你按的是同一个东西，而不是这边按关了，打算按另一个房间的开关来开启）。
window.onload = function () {
// 通过getElementById获得相应的DOM元素
var prev = document.getElementById("prev");
var next = document.getElementById("next");
// var info = document.getElementById("info");
// var box = document.getElementById("box");
//这里特别注意得到的是一个数组，如果不弄数组的形式是得不到有效果的值(就是自己需要的那一个值)
var img = document.getElementsByTagName("img")[0];
// 定义一个数组用来装需要轮播的背景图片
var imgArr = ["img/fj1.jpg", "img/fj2.jpg", "img/fj3.jpg", "img/fj4.jpg", "img/fj5.jpg", "img/fj6.jpg"];
// 定义一个变量来存放每个背景图的索引值，初始化为0，后续会根据它们来实现切换功能
var index = 0;
// info.innerHTML="共<span>"+imgArr.length+"</span>张图片，这是第<span>"+(index+1)+"</span>张";
//（1）实现左右图标的切换功能
// 实现左边图标的切换功能，用到了点击事件（即切换到前一张图片）
prev.onclick = function () {
index--;
if (index < 0) {
index = imgArr.length - 1;
}
img.src = imgArr[index];
// info.innerHTML="共<span>"+imgArr.length+"</span>张图片，这是第<span>"+(index+1)+"</span>张";
};
//（1）实现左右图标的切换功能
// 实现右边图标的切换功能，用到了点击事件（即切换到后一张图片）
next.onclick = function () {
index++;
if (index > imgArr.length - 1) {
index = 0;
}
img.src = imgArr[index];
// info.innerHTML="共<span>"+imgArr.length+"</span>张图片，这是第<span>"+(index+1)+"</span>张";
};
//（2）实现轮播图自动轮播的功能（不需要手动切换）
// 实现轮播图自动轮播的效果，所以用到了定时器，每隔2.5自动切换下一张图（2500默认以毫秒为单位，即2.5s）
var time1 = setInterval(() => {
index++;
if (index > imgArr.length - 1) {
index = 0;
}
img.src = imgArr[index];
}, 2500)
// 判断鼠标在哪个元素上，在下面的中间阶段和恢复阶段功能实现之前需要确定是针对哪一个元素
//在此种情况下可能会进入误区，会把装背景图的box作为对象，但是其实是针对img的！
var el = window.document.body; //声明一个变量，默认值为body
window.document.body.onmouseover = function (event) {
el = event.target; //鼠标每经过一个元素，就把该元素赋值给变量el
console.log('当前鼠标在', el, '元素上'); //在控制台中打印该变量
}
// js实现轮播图核心之一：鼠标放在轮播的背景图上时停止轮播（用户进行事件），当鼠标移出轮播图区域后再恢复轮播，
// 所以分为2个阶段：中间暂停阶段、恢复阶段
// 1.中间暂停阶段
img.onmouseover = function () {
clearInterval(time1);
};
//2.恢复阶段
img.onmouseleave = function () {
time1 = setInterval(() => {
index++;
if (index > imgArr.length - 1) {
index = 0;
}
img.src = imgArr[index];
// img.style.opacity=0.5;
}, 2500)
};
};最终效果展示
希望对大家有帮助！
9526
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
