今天做一个简易轮播图
首先做轮播图没有好看的图片怎么行，准备三张大小一致的图片，图片1图片2图片3。
01.jpg
02.jpg
03.jpg
文件结构： 
在html文件夹下新建review.html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/review.css"/>
</head>
<body>
<!--div是一个容器，装着三张图片， 三个圆点和点击上一张下一张-->
<div>
<!--装着三张横向排布的图片-->
<!--ul中放3个li，每个li装一张你要轮播的图片-->
<ul>
<li><img src="../images/01.jpg" alt="" /></li>
<li><img src="../images/02.jpg" alt="" /></li>
<li><img src="../images/03.jpg" alt="" /></li>
</ul>
<!--圆点-->
<ol>
<li class="current"></li>
<li></li>
<li></li>
</ol>
<!--上一张，下一张-->
<span class="left"><</span>
<span class="right">></span>
</div>
<!--js代码-->
<!--script引入jq-->
<!--1、搜索jq插件库下载jq插件库文件版本，根据项目经理指示
2、解压jq插件库文件
3、引入：01引入jq，02引入自身的js文件
4、js在body内的最后一行引入，js在html中式从上到下被渲染的。-->
<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/review.js"></script>
</body>
</html>
在css文件夹下新建review.css：
*{
margin: 0px;
padding: 0px;
list-style: none;
}
div{
width: 931px;
height: 455px;
margin: 100px auto;
/*overflow：hidden，父级是可以把子级超过自己的东西隐藏起来的，即超出div这个框框的图片隐藏起来即*/
overflow: hidden;
position:relative;
}
ul{
/*ul的宽度大于等于img的宽度*5（li的个数），子级的大小是可以超过父级的*/
width: 4655px;
/*transform: translateX(-931px);
* 控制图片水平位移:正值:右;负值:左;*/
}
li{
/*使图片水平排列，父级足够宽才足以水平排列*/
float: left;
}
ol{
/*自己绝对定位,父级相对定位
自己固定在父级的某个位置,top bottom left right*/
position: absolute;
bottom: 10px;
left: 50%;
/*背景透明 ,rgb红绿蓝 a为透明度*/
background: rgba(255,255,255,0.3);
/*再水平位置上向左移动自身的一半*/
transform: translateX(-50%);
/*设置圆角*/
border-radius: 20%;
}
/*空格代表后代选择器*/
ol li{
width: 16px;
height: 16px;
margin: 2px 10px;
background: #FFFFFF;
border-radius: 50%;
}
.current{
background: pink;
}
span{
position: absolute;
/*定位:绝对定位，父级相对定位*/
width: 50px;
height: 50px;
background: rgba(0,0,0,0.1);
/*rgb为红蓝绿,a为透明度*/
top: 200px;
left: 10px;
text-align: center;
line-height: 50px;
color: #fff;
border-radius: 50%;
/*增加圆角*/
cursor: pointer;
/*鼠标移入增加小手*/
}
/*设置前进后退*/
.left{
left: 20px;
}
.right{
right: 20px;
}
在js文件夹下新建review.js
扫描二维码关注公众号，回复：
5027337 查看本文章
var n = 0;
var timer;
//运行函数
go();
//定义函数
function go() {
// 定义定时器
timer = setInterval(function() {
n = n + 1;
if(n > 2) {
n = 0;
}
go1();
}, 1000);
}
//鼠标移入轮播图,轮播图停止,离开继续跑动
//$('div').hover(function(){鼠标移入},function(){鼠标移出})
$('div').hover(function() {
clearInterval(timer);
}, function() {
go();
});
//点击左边
$('.left').click(
function(event) {
n = n - 1;
if(n < 1) {
// 此处不可以使用var n=0,这样子涉及全局变量局部变量
//也不可以使用n==0,两个等于号是判断相等
n = 0;
}
go1();
}
)
//点击右边
$('.right').click(
function(event) {
n = n + 1;
if(n > 2) {
n = 0;
}
go1();
}
)
function go1() {
//小点变色
//.eq（n)选择具体某一个标签,n从0开始
//控制css， 选择标签.css('样式'，'样式的值')
//常量和变量拼接 `常量${变量}常量`（ES6的语法）
$('ul').css('transform', `translate(${-931*n}px)`)
// 给显示的图片的对应圆点加颜色
$('ol li').eq(n).addClass('current')
// 给没显示的图片的对应圆点去除颜色
$('ol li').eq(n).siblings().removeClass('current')
}运行效果：
一个简单的轮播图就完成了。