做一个前端网页送给女朋友~轮播图+纪念日
Posted 0202ohh
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了做一个前端网页送给女朋友~轮播图+纪念日相关的知识，希望对你有一定的参考价值。
文章目录
咳咳，最近也是一不小心脱了个单
想着没事做一个纪念日的网页，想着想着又觉得只有一个纪念日怎么能够呢！于是突发奇想想整个轮播图，本来本人前端知识也不够丰富，于是辗转各大平台和网站，借鉴了各路大佬们的文章和视频，最后也是勉强完成了自己的一个小目标。
先看一下效果预览
主要难实现的就是一个轮播图，刚开始学这个的时候在网上看了很多视频和教程，都比较难，最后在b站看到一个up主讲的十分详细，用的方法也简单易懂。我制作轮播图的代码也是借鉴的这位up主：红点工厂。
总代码在最下面。
1. 轮播图框架
首先我们需要构造一个轮播图的框架，如下：
先用“shift+1+enter”搞出基本标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
然后是轮播图的架构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 轮播图的一个大盒子 -->
<div class="box">
<!-- 用无序列表来装图片 -->
<ul class="picList">
<li><img></li>
<li><img></li>
<li><img></li>
<li><img></li>
</ul>
<!-- 这个无序列表用来表示轮播图下面的小圆点 -->
<ul class="pointList">
</ul>
<!-- 两个左右按钮用来切换图片 -->
<button type="button" class="btn" id="leftbtn"></button>
<button type="button" class="btn" id="rightbtn"></button>
</div>
</body>
</html>
整体的一个html文件大概就是这样，下面我们先去掉按钮和小圆点，先来实现轮播图的大盒子：
2. 轮播图大盒子实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel = "stylesheet" href = "1.css">
</head>
<body>
<!-- 轮播图的一个大盒子 -->
<div class="box">
<!-- 用无序列表来装图片 -->
<ul class="picList">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
</ul>
</div>
</body>
</html>
1. 盒子及图片的可视化
此时页面并没有任何效果，下面我们添加一些简单的css样式（注意我在这里是添加了外部样式表）：
.box
/* 2.1设置轮播图盒子的大小 */
height:300px;
width:500px;
/* 2.1添加边框可视化盒子 */
border:2px solid black;
.picList
/* 2.1去掉无序列表的样式，也就是去掉前面的小黑点 */
list-style: none;
.item
/* 2.1设置每张图片的大小，必须跟轮播图盒子大小一样 */
height:300px;
width:500px;
/* 2.1将每张图片左上角的数字变大一些 */
font-size: 20px;
/* 2.1再变粗一些 */
font-weight: 600;
/* 2.1再变个颜色 */
color:#fff;
/* 2.1放入每张图片，这里就为每个li元素填色来表示图片 */
.item:nth-child(1)
background-color: brown;
.item:nth-child(2)
background-color: gray;
.item:nth-child(3)
background-color: black;
.item:nth-child(4)
background-color: pink;
注释中的2.1这些表示在哪个步骤添加的样式，方便大家阅读。
此时页面效果如下：
从图中可以看到我们轮播图的大盒子，还有我们的几张图片。不过问题就是这些图片都是竖着排列的，我们要的一个效果应该是将这些图片横向重叠起来，并且还要放入轮播图的盒子中。下面我们继续增添样式来达到我们想要的效果。
2. 将图片重叠起来并放入轮播图盒子中
.box
/* 2.1设置轮播图盒子的大小 */
height:300px;
width:500px;
/* 2.1添加边框可视化盒子 */
border:2px solid black;
.picList
/* 2.1去掉无序列表的样式，也就是去掉前面的小黑点 */
list-style: none;
/* 2.2让li元素相对于picList进行定位 */
position: relative;
/* 2.2这里图片没有放进轮播图盒子中是因为内边距和外边距的存在，将它们设置为0就行了 */
padding: 0;
margin:0;
.item
/* 2.1设置每张图片的大小，必须跟轮播图盒子大小一样 */
height:300px;
width:500px;
/* 2.1将每张图片左上角的数字变大一些 */
font-size: 20px;
/* 2.1再变粗一些 */
font-weight: 600;
/* 2.1再变个颜色 */
color:#fff;
/* 2.2先让图片横向排列，我们就需要让li元素左浮动 */
/* 2.2在浮动之前一定要对元素进行定位！！！！ */
/* 2.2定位后发现图片已经横向排列并且重叠好了 */
position: absolute;
/* 2.1放入每张图片，这里就为每个li元素填色来表示图片 */
.item:nth-child(1)
background-color: brown;
.item:nth-child(2)
background-color: gray;
.item:nth-child(3)
background-color: black;
.item:nth-child(4)
background-color: pink;
此时页面效果为：
关于相对定位和绝对定位我在这里作出一点自己的理解。
…相对定位与绝对定位
假如有一列队伍在排队，此时一个人可以相对定位，那么他就可以相对于原来的位置进行移动，但是就算他移动了，他原本的位置还是在那，只是他这个人在动。
那么此时又有一个人可以绝对定位，那么他就脱离了原来的队伍，“飞”到了这个队伍的头上，同时他原来后面的人就会往前走占据他的位置，他的位置也变到了原本队伍的头上。如果说原来队伍在平面1，那么这个绝对定位的人就是在平面2。
大概就是这么个意思，这个队伍就相当于是文档流，每个人就相当于是元素，我这个比喻可能也不太恰当，只是想在这里提一嘴0.0。
注意，对元素进行定位后要有偏移量时才会移动，如果只定位，没有偏移量，元素就不会移动。
还有一个口诀可以记住——“父相子绝”，一般定位就是让父元素相对定位，子元素绝对定位。
3. 添加左右按钮
然后我们就来添加左右按钮，并将它放到合适的位置上去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel = "stylesheet" href = "1.css">
</head>
<body>
<!-- 轮播图的一个大盒子 -->
<div class="box">
<!-- 用无序列表来装图片 -->
<ul class="picList">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
</ul>
<button type="button" class="btn" id="leftbtn"><</button>
<button type="button" class="btn" id="rightbtn">></button>
</div>
</body>
</html>
此时页面效果：
咦，按钮去哪了？？你有什么头绪吗？
此时我们取消无序列表的内外边距来看看（将那两行代码去掉）：
噢！原来是被藏在了图片的下面，这是为什么呢？
在前面我们对每张图片做了一个绝对定位，于是这四张图片都直接起飞了，第一张飞到了平面2…最后一张就飞到了平面5，那么我们此时重新设置无序列表的内外边距（ctrl+z撤回刚刚对无序列表的操作），在将按钮进行绝对定位，它是不是会直接飞到平面6？也就是最上面那一层，看下面的页面效果：
ok，我们继续添加css样式：
.btn
/* 2.3对按钮绝对定位，让它飞到平面6 */
position: absolute;
/* 2.3设置按钮的大小 */
height:30px;
width:40px;
/* 2.3设置偏移量 */
/* 2.3偏移到距离父元素顶部140px处 */
top: 140px;
#leftbtn
/* 2.3左按钮距离盒子左边框0px */
left:0;
#rightbtn
/* 2.3右按钮距离盒子右边框0px */
right:0;
我们向css文件中继续添加了这些代码后，效果如下：
怎么按钮没有在盒子的左右两边呢？
这是因为按钮和无序列表是兄弟关系，对按钮进行绝对定位，而按钮的父元素是box，box又没设置相对定位，于是就默认是以浏览器为父元素了。所以我们只需给box加一个相对定位即可，即满足父相子绝！！！
下面继续添加样式：
.box
/* 2.1设置轮播图盒子的大小 */
height:300px;
width:500px;
/* 2.1添加边框可视化盒子 */
border:2px solid black;
/* 2.3作为按钮的父元素，对它相对定位 */
position: relative;
.picList
/* 2.1去掉无序列表的样式，也就是去掉前面的小黑点 */
list-style: none;
/* 2.2让li元素相对于picList进行定位 */
position: relative;
/* 2.2这里图片没有放进轮播图盒子中是因为内边距和外边距的存在，将它们设置为0就行了 */
padding: 0;
margin:0;
.item
/* 2.1设置每张图片的大小，必须跟轮播图盒子大小一样 */
height:300px;
width:500px;
/* 2.1将每张图片左上角的数字变大一些 */
font-size: 20px;
/* 2.1再变粗一些 */
font-weight: 600;
/* 2.1再变个颜色 */
color:#fff;
/* 2.2先让图片横向排列，我们就需要让li元素左浮动 */
/* 2.2在浮动之前一定要对元素进行定位！！！！ */
/* 2.2定位后发现图片已经重叠好了，这时就不需要浮动了 */
position: absolute;
/* 2.1放入每张图片，这里就为每个li元素填色来表示图片 */
.item:nth-child(1)
background-color: brown;
.item:nth-child(2)
background-color: gray;
.item:nth-child(3)
background-color: black;
.item:nth-child(4)
background-color: pink;
.btn
/* 2.3对按钮绝对定位，让它飞到平面6 */
position: absolute;
/* 2.3设置按钮的大小 */
height:30px;
width:40px;
/* 2.3设置偏移量 */
/* 2.3偏移到距离父元素顶部140px处 */
top: 140px;
/* 2.3设置按钮的透明度 */
opacity: 0.5;
/* 2.3鼠标放到按钮上面时显示小手 */
cursor:pointer;
#leftbtn
/* 2.3左按钮距离盒子左边框0px */
left:0;
#rightbtn
/* 2.3右按钮距离盒子右边框0px */
right:0;
效果如下：
4. 点击按钮跳转图片
那么我们怎么来实现跳转呢？
这就要谈到我在开头提到的比较好懂的一种方式：我们可以给其中一张图片添加一个样式，让图片浮到最上面来，每点击按钮一次这个样式就跑到了下一个图片，而上一张图片就没有这个样式了。可以理解为是这个样式在图片中来回穿梭，图片本质上是没有动的。
下面我们给任一图片添加一个样式：
.up
/* 2.4相当于使其出现在平面100上，目前来说就是处于最上面的一层 */
z-index: 100;
<li class="item up">1</li>
显示如下：
可以看到最下面的一张图片跑到最上面了，但是这时又出现问题了，我的按钮又被盖住了。。。。。不过不用担心，我们再让按钮飞得高一点就是了！
.btn
/* 2.3对按钮绝对定位，让它飞到平面6 */
position: absolute;
/* 2.3设置按钮的大小 */
height:30px;
width:40px;
/* 2.3设置偏移量 */
/* 2.3偏移到距离父元素顶部140px处 */
top: 140px;
/* 2.3设置按钮的透明度 */
opacity: 0.5;
/* 2.3鼠标放到按钮上面时显示小手 */
cursor:pointer;
/* 2.4让按钮飞得高一些 */
z-index: 1000;
这时按钮就浮现出来了。
好了，我们已经知道大概原理了，下面来理清一下思路：
- 每点击一次按钮up样式就跳到下一张图片，使下一张图片浮现
- 同时我们要记得将上一张图片的up样式去掉
大概就是介个样子，下面开始写js代码（我这里是添加的外部js文件）：
// 2.4获取图片
var items = document.getElementsByClassName('item');
// 2.4获取左右按钮
var leftBtn = document.getElementById('leftbtn');
var rightBtn = document.getElementById('rightbtn');
// 2.4图片索引
var index = 0;
// 2.4跳转到下一张图片
var goNext = function()
// 2.4点击右按钮后，先去掉当前图片的up样式
items[index].className = "item";
// 2.4索引跳到下一张图片
index++;
// 2.4为下一张图片添加up样式
items[index].className = "item up";
// 2.4点击事件，每点击一次右按钮，就执行goNext函数一次
rightBtn.addEventListener('click',function()
goNext();
)
效果如下：
可以看到跳转到最后一张照片时，就跳转不动了，这时因为我们只有4张图片，也就是index最大值为3，所以我们应该添加一个对index值的判断，当我们跳转到最后一张图片时，我们再点击一下右按钮应该跳转到第一张图片上去，并且我们可以改善一下去掉上一张图片的up样式这一操作。
// 2.4获取图片
var items = document.getElementsByClassName('item');
// 2.4获取左右按钮
var leftBtn = document.getElementById('leftbtn');
var rightBtn = document.getElementById('rightbtn');
// 2.4图片索引
var index = 0;
// 2.4去掉全部图片的up样式
var clearUp = function()
for(var i = 0 ; i < items.length ; i++)
items[i].className = "item";
// 2.4跳转到下一张图片
var goNext = function()
// 2.4设置index最大值只能是3
if(index < 3)
index++;
web前端设计必备网页特效案例 - 轮播图
目录
第二步：在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>
轮播图是我们在网站首页司空见惯的网页特效案例之一，它占用地方少，交互性好，是前端设计必须要掌握的技能之一。
以上是关于做一个前端网页送给女朋友~轮播图+纪念日的主要内容，如果未能解决你的问题，请参考以下文章