js实现可切换轮播图（附有导航条）

妖狐艹你老母 2022-09-08 14:52 164阅读 0赞

## 前言：先滑到最后查看效果展示是否自己有必要继续。 ##

**目录**

案例介绍

项目结构

相关代码展示（不展示的就是自己可以准备的，就没必要展示了）

1 slide\_pic.html（页面结构）

2 slide\_pic.css（样式效果）

3 slide\_pic.js （页面交互效果）

最终效果展示

--------------------

## 案例介绍 ##

这个案例的目的是利用js实现轮播图的自动轮播、切换以及暂停和恢复轮播功能。案例中除了主角js外还使用了bootstrap的css文件，它只用来构建了导航栏，轮播图部分的自动轮播、暂停和恢复功能是利用定时器实现的。

## 项目结构 ##

项目虽说是小项目但是我本人是一个强迫症患者，所以还是得层次分明，合理规划。本案例项目结构如下：

![20210826230048386.bmp][]

这个案例是利用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>
    	
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    	
    	<link rel="icon" href="img/js_facion.jpg">
    
    	
    	<link rel="stylesheet" href="./css/slide_pic.css">
    	<link href="./css/bootstrap.min.css" rel="stylesheet" media="screen">
    
    	
    	<script type="text/javascript" src="./js/slide_pic.js"></script>
    	
    
    </head>
    
    <body>
    	
    	<div class="box" id="box">
    		
    		<header>
    	
    			<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>
    		
    
    		
    		<div class="tip">
    			Welcome!
    		</div>
    
    		
    		<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按出的调试工具找到了元素但是就是没显示，注意了，这个原因可能是层级错乱（自己编的），你可以用下面标记部分的方式尝试一下，目的是让这个元素的层级优先级最高，让它显示在最上层，这样就会显示出来了。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQ29kZV9Xb3JsZHM_size_9_color_FFFFFF_t_70_g_se_x_16][]

* {
    		    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，这样就没有歧义了，就是同一个东西（相当于平时的房间里的灯的开关，你按的是同一个东西，而不是这边按关了，打算按另一个房间的开关来开启）。

## 最终效果展示 ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQ29kZV9Xb3JsZHM_size_20_color_FFFFFF_t_70_g_se_x_16][]

希望对大家有帮助！

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQ29kZV9Xb3JsZHM_size_18_color_FFFFFF_t_70_g_se_x_16][]

[20210826230048386.bmp]: /images/20220829/639beba53ada4e338da2c649c0b1f63c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQ29kZV9Xb3JsZHM_size_9_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/9cde0634afae4b9ebe1e12aafe695ae7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQ29kZV9Xb3JsZHM_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/8a86c0b189d44037b4e12738453e52f5.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQ29kZV9Xb3JsZHM_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/171f827693dd46e9a2ab1f7007c8cd86.png