关键词：
目录
第二步：在bootstrap网站的JavaScript 插件里面找到轮播图，然后复制代码到自己的body里面,在做修改。根据自己所需要实现的轮播图效果来选择要不要复制小圆点和左右按钮的结构代码
前言
现在网站越来越简洁，说实在的，如果没有大轮播，整个网站看上去都是那么苍白无力。不可否认轮播图提升了整个网站的逼格。所以一个网站有一个好的轮播图的修饰时多么的重要。下面就简单介绍一些轮播图的实现方法。
效果分析
效果展示：
结构分析：
轮播的图片+左右两侧切换的按钮+下面轮动的小圆点
<div class="focus">
<!-- 左右侧切换的小按钮 -->
<a href="javascript:;" class="arrow-l arrow">
<
</a>
<a href="javascript:; " class="arrow-r arrow">
>
</a>
<!-- 轮播的图片 -->
<ul>
<li><a href="#"><img src="images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/4.jpg" alt=""></a></li>
</ul>
<!-- 小圆点显示播放第几张图 -->
<ol class="circle">
</ol>
</div>CSS修饰：
<style>
*
margin: 0;
padding: 0;
li
list-style: none;
a
text-decoration: none;
color: #eee;
.focus
margin: 100px auto;
position: relative;
width: 600px;
height: 400px;
background-color: purple;
overflow: hidden;
/* 左右侧切换的小按钮 */
.focus .arrow
display: none;
width: 24px;
height: 40px;
/* border: 1px solid #eee; */
line-height: 40px;
text-align: center;
background: rgba(104, 103, 103, 0.3);
font-size: 20px;
/* 用了定位注意层级问题 */
z-index: 11;
.focus .arrow-l
position: absolute;
left: 0;
top: 50%;
margin-top: -15px;
border-radius: 0 20px 20px 0;
.focus .arrow-r
position: absolute;
right: 0;
top: 50%;
margin-top: -15px;
border-radius: 20px 0 0 20px;
/* 轮播图的区域 */
.focus ul
/* ul 里面放着所有轮播图的图片，所以 ul 的宽度必须足够大能够容纳所有图片
这里有4张图片，ul宽度设置为 600% */
width: 600%;
position: absolute;
top: 0;
left: 0;
.focus ul li
float: left;
.focus ul li a img
width: 600px;
height: 400px;
/* 小圆点显示区域 */
.focus ol
position: absolute;
left: 50%;
bottom: 20px;
margin-left: -40px;
.focus ol li
float: left;
width: 10px;
height: 10px;
margin: 5px;
border-radius: 50% 50%;
border: 1px solid #fff;
cursor: pointer;
.current
background-color: #fff;
</style>功能需求：
1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。
2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。
3.图片播放的同时，下面小圆圈模块跟随一起变化。
4.点击小圆圈，可以播放相应图片。
5.鼠标不经过轮播图，轮播图也会自动播放图片。
6.鼠标经过，轮播图模块， 自动播放停止。
原生JS实现
JS代码：
window.addEventListener('load', function()
// 1. 获取元素
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
var focusWidth = focus.offsetWidth;
// 2. 鼠标经过focus 就显示隐藏左右按钮
focus.addEventListener('mouseenter', function()
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
clearInterval(timer);
timer = null; // 清除定时器变量
);
focus.addEventListener('mouseleave', function()
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
timer = setInterval(function()
//手动调用点击事件
arrow_r.click();
, 2000);
);
// 3. 动态生成小圆圈 有几张图片，我就生成几个小圆圈
var ul = focus.querySelector('ul');
var ol = focus.querySelector('.circle');
for (var i = 0; i < ul.children.length; i++)
// 创建一个小li
var li = document.createElement('li');
// 记录当前小圆圈的索引号 通过自定义属性来做
li.setAttribute('index', i);
// 把小li插入到ol 里面
ol.appendChild(li);
// 4. 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件
li.addEventListener('click', function()
// 干掉所有人 把所有的小li 清除 current 类名
for (var i = 0; i < ol.children.length; i++)
ol.children[i].className = '';
// 留下我自己 当前的小li 设置current 类名
this.className = 'current';
// 5. 点击小圆圈，移动图片 当然移动的是 ul
// ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值
// 当我们点击了某个小li 就拿到当前小li 的索引号
var index = this.getAttribute('index');
// 当我们点击了某个小li 就要把这个li 的索引号给 num
num = index;
// 当我们点击了某个小li 就要把这个li 的索引号给 circle
circle = index;
// num = circle = index;
console.log(focusWidth);
console.log(index);
//动画函数调用
animate(ul, -index * focusWidth);
)
// 把ol里面的第一个小li设置类名为 current
ol.children[0].className = 'current';
// 6. 克隆第一张图片(li)放到ul 最后面
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
// 7. 点击右侧按钮， 图片滚动一张
var num = 0;
// circle 控制小圆圈的播放
var circle = 0;
// flag 节流阀
var flag = true;
arrow_r.addEventListener('click', function()
if (flag)
flag = false; // 关闭节流阀
// 如果走到了最后复制的一张图片，此时 我们的ul 要快速复原 left 改为 0
if (num == ul.children.length - 1)
ul.style.left = 0;
num = 0;
num++;
//动画函数调用
animate(ul, -num * focusWidth, function()
flag = true; // 打开节流阀
);
// 8. 点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
circle++;
// 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原
if (circle == ol.children.length)
circle = 0;
// 调用函数
circleChange();
);
// 9. 左侧按钮做法
arrow_l.addEventListener('click', function()
if (flag)
flag = false;
if (num == 0)
num = ul.children.length - 1;
ul.style.left = -num * focusWidth + 'px';
num--;
//动画函数调用
animate(ul, -num * focusWidth, function()
flag = true;
);
// 点击左侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
circle--;
// 如果circle < 0 说明第一张图片，则小圆圈要改为第4个小圆圈（3）
circle = circle < 0 ? ol.children.length - 1 : circle;
// 调用函数
circleChange();
);
function circleChange()
// 先清除其余小圆圈的current类名
for (var i = 0; i < ol.children.length; i++)
ol.children[i].className = '';
// 留下当前的小圆圈的current类名
ol.children[circle].className = 'current';
// 10. 自动播放轮播图
var timer = setInterval(function()
//手动调用点击事件
arrow_r.click();
, 2000);
)拓展知识：
1.动画函数封装
function animate(obj, target, callback)
// console.log(callback); callback=function()
//给不同的元素指定不同的定时器
//不断点击开始按钮，速度会越来越快，因为开始了太多的定时器
clearInterval(obj.timer);//解决方案：让元素只有一个定时器
obj.timer = setInterval(function ()
// 步长值写到定时器里面
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target)
clearInterval(obj.timer);
//回调函数写到哦定时器结束里面
callback && callback();//短路运算
//当前的位置+1
//每次加1 改为一个慢慢变小的值
obj.style.left = obj.offsetLeft + step + 'px';
, 30)
2.节流阀：防止轮播图按钮连续点击造成播放过快。
节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。
核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。
开始设置一个变量var flag= true;
If(flag)flag = false; do something 关闭水龙头
利用回调函数动画执行完毕， flag = true 打开水龙头
是不是没看懂原生JS轮播图的做法，没关系。
已经有优秀的程序员给我们写好了很多插件，可以让我们直接引用插件来实现轮播图的效果。
下面就来简单介绍并使用一下。
插件实现
Bootstrap里面JS 插件
网址：JavaScript 插件 · Bootstrap v3 中文文档 | Bootstrap 中文网
在调用bootstrap里面的插件的时候，因为某些插件和 CSS 组件依赖于其它插件。如果你是单个引入每个插件的，请确保在文档中检查插件之间的依赖关系。
！！！所有插件都依赖 jQuery （jQuery必须在所有插件之前引入页面）。
第一步：引入插件和css，js文件
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
crossorigin="anonymous"></script>
<!-- 引入css文件 路径：根据你自己下载的位置编写-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- 引入js文件 -->
<script src="bootstrap/js/bootstrap.min.js"></script>第二步：在bootstrap网站的JavaScript 插件里面找到轮播图，然后复制代码到自己的body里面,在做修改。根据自己所需要实现的轮播图效果来选择要不要复制小圆点和左右按钮的结构代码
<div class="focus">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators 小圆点 -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides 轮播图片 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="图片路径" alt="...">
<div class="carousel-caption">
<!-- 轮播的图片上显示的文字内容等，根据需要添加或删除 -->
...
</div>
</div>
<!-- 轮播的图片张数，自己添加 -->
...
<div class="item">
<img src="图片路径" alt="...">
<div class="carousel-caption"> ... </div>
</div>
</div>
<!-- Controls 左右箭头-->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>swiper插件
网址：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
swiper是一个实现轮播图很强大，上手也容易。并且也是现在app，网址等用的最多的。
第一步：首先加载插件，需要用到的文件有swiper.min.css和swiper.min.js（不同Swiper版本用到的文件名略有不同）。打开demo实例文件，查看需要引入的相关文件，并且引入。我这使用的是swiper-4.5.3.用的是demos里面280-autoplay.html
第二步：复制代码
body：
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Slide 1 写上需要轮播的图片 -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination 页码-->
<div class="swiper-pagination"></div>
<!-- Add Arrows 左右两个按钮-->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>css：（这是自己需要复制的代码）
<style>
html, body
position: relative;
height: 100%;
body
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
.swiper-container
width: 100%;
height: 100%;
.swiper-slide
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
</style>JS：（这是自己需要复制的代码）
<script>
var swiper = new Swiper('.swiper-container',
spaceBetween: 30,
centeredSlides: true,
autoplay:
delay: 2500,
disableOnInteraction: false,
,
pagination:
// 如果需要分页器（小圆点）
// 是否需要分页器
el: '.swiper-pagination',
// 点击分页器是否切换到对应的图片 是 true 否 false
clickable: true,
,
navigation:
// 如果需要前进后退按钮
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
,
);
</script>轮播图是我们在网站首页司空见惯的网页特效案例之一，它占用地方少，交互性好，是前端设计必须要掌握的技能之一。
前端bootstrap案例：轮播图(代码片段)
bootstrap框架系列案例案例网址【前端】Bootstrap案例：导航栏https://blog.csdn.net/karshey/article/details/127372691【前端】Bootstrap案例：轮播图https://blog.csdn.net/karshey/article/details/127388528【前端】Bootstrap案例 查看详情
案例：网页轮播图(代码片段)
轮播图也称为焦点图，是网页中比较常见的网页特效。功能需求：1.鼠标经过轮播图模块，左右按钮显示，鼠标离开则隐藏左右按钮。2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。3.图片播放的同时，下面... 查看详情
前端必备技能——轮播图（原生代码+插件）(代码片段)
网页上的大致轮播图的滚动就是上面的演示轮播图的制作在制作轮播图的过程中我分成3步：框架的搭建——样式的装扮——动画效果。1.框架的搭建如下代码展示，就是先在HTML里搭建出一个框架来： <body><div... 查看详情
前端小白案例-商品轮播图制作(代码片段)
知识点：html加CSS布局、html加css布局思维，定位、浮动详解。html代码：<divclass="banner"><divclass="pic"><ulid="pic"><listyle="background-image:url(‘images/VIP_img1.jpg‘);left:0;"></li><listyle= 查看详情
web前端练习23----js中延时执行函数setinterval()和settimeout()案例：倒计时，大小动画平移动画，轮播图(代码片段)
文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setIntervalhttps://developer.mozilla.org/zh-CN/docs/Web/API/Window/setTimeoutsetInterval();定时执行函数 setInterval 无限次的执行，要通过 clearInterval() 停止基本语法每1秒执行一次，无限... 查看详情
轮播图案例(代码片段)
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>轮播图4</title><style>*margin:0;padding:0;list-style:none;.boxoverflow:hidden;position:relative 查看详情
网页轮播图(代码片段)
轮播图也称为焦点图，是网页中比较常见的网页特效。功能需求：1.鼠标经过轮播图模块，左右按钮显示；鼠标离开时隐藏；2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理；3.图片播放的同时，下面小圆圈模... 查看详情
web实训项目--网页设计（附源码）(代码片段)
1实训基本信息1.1实训项目名称网页设计1.2实训环境本次实训的形式以实战讲解为主，以项目为主导。学习如何设计网页中的轮播图和动画效果，并掌握a标签文本内容跳转、超链接的应用、播放音乐与视频等操作。2实训... 查看详情
做一个前端网页送给女朋友~轮播图+纪念日(代码片段)
...能够呢！于是突发奇想想整个轮播图，本来本人前端知识也不够丰富，于是辗转各大平台和网站，借鉴了各路大佬们的文章和视频，最后也是勉强完成了自己的一个小目标。先看一下效果预览主要难实现的就... 查看详情
javascript详解数据驱动显示之轮播图案例——三-----手撕轮播图(代码片段)
javaScript详解数据驱动显示之轮播图案例三<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE= 查看详情
轮播图案例
js原生代码实现轮播图案例http://www.cnblogs.com/Jabin/p/5881855.html jS和JQ实现轮播图的方法http://www.jb51.net/article/64662.htm 原生js带缩略图点击幻灯片轮播切换特效http://www.17sucai.com/pins/14066.html 查看详情
新增轮播图跳转web页面轮播推荐歌单数据存储（简易音乐七）(代码片段)
新增轮播图跳转web页面、轮播、推荐歌单数据存储（简易音乐七）关于效果图第一步，添加引用新增数据库实体类修改fragment代码新增WebActivity页面加载网页关于 本篇主要使用到了腾讯x5浏览器webview与litepal操作sqli... 查看详情
纯前端实现—jq轮播图（轮播图完全版）(代码片段)
实现效果：前面有篇文讲解过鼠标轮播图——https://gu-han-zhe.blog.csdn.net/article/details/121315021，还得鼠标点，有点麻烦，所以这篇给B格提升些！实现JQ轮播图（完全版~）！JQ轮播图源码：<!DOCTYPEht 查看详情
android简易音乐重构mvvmjava版-新增轮播图网页链接跳转展示（十五）(代码片段)
Android简易音乐重构MVVMJava版-新增轮播图网页链接跳转展示（十五）关于效果图新增WebActivity页面修改WebActivity修改DiscoverFragment新增BindingAdapter修改MgcAdapter与LookAdapter关于 本篇主要讲述轮播图跳转web网页及个人新版webvie... 查看详情
android简易音乐重构mvvmjava版-新增轮播图网页链接跳转展示（十五）(代码片段)
Android简易音乐重构MVVMJava版-新增轮播图网页链接跳转展示（十五）关于效果图新增WebActivity页面修改WebActivity修改DiscoverFragment新增BindingAdapter修改MgcAdapter与LookAdapter关于 本篇主要讲述轮播图跳转web网页及个人新版webvie... 查看详情
纯前端实现—初级轮播图(代码片段)
实现效果：初级轮播图源码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>初级轮播图</title><style>divwidth:300px;height:3 查看详情
仿网页轮播图(代码片段)
html部分 <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>网易轮播图js部分</title><linkrel="stylesheet"href="css/css.css"><scriptsrc="js/slider.j 查看详情
js之pc端网页特效三(代码片段)
一、常见网页特效案例1.1、网页轮播图功能需求鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理图片播放的同时，下面小圆圈模块... 查看详情