不墨迹，直接看代码注释
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="demo.css">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
<div class="container">
<div class="box">
<img src="https://img-blog.csdn.net/20170908172159479">
<img src="https://img-blog.csdn.net/20170908172353986">
<img src="https://img-blog.csdn.net/20170908172424315">
</div>
<div class="circle">
<b class="current"></b>
<b></b>
<b></b>
</div>
<div class="left">《</div>
<div class="right">》</div>
</div>
<button id="btn">按钮</button>
<script type="text/javascript">
$(document).ready(function(){
var i=0;
var timer;
// 找到第一个img并显示，找到同级元素并隐藏
$("img").eq(0).show().siblings().hide();
/*开始做图片轮播，使用定时器*/
// 设置定时器
function start(){
timer=setInterval(function(){
console.log(i);
i++;
// i的最大值要和图片书相等
if(i==3){
i=0;
}
change();
},2000)
}
start();
// 改变当前图片和原点
function change(){
/*当前图片淡入，其他图片淡出*/
$('img').eq(i).fadeIn(300).siblings().stop(true,true).fadeOut(300);
$('b').eq(i).addClass("current").siblings().removeClass("current");
}
// 点击左边按钮时候，显示当前图片的左边的第一个图片，再点击，依次向左，图片变换，圆点样式变换。当停止点击按钮时，图片依旧一定时间内显示下一个图片（右边的第一个）*/
$('.left').click(function(){
console.log(i+'左');
i--;
if (i==-1) {
i=2;
}
change();
});
$('.right').click(function(){
console.log(i+'右');
i++;
if (i==3) {
i=0;
}
change();
});
// 鼠标移入小圆点的时候，首先清除定时器，找到当前圆点的索引，改变当前显示的图片，使其变换成圆点对应的图片，当前圆点变换样式*/
$("b").hover(function(){
clearInterval(timer);
//index()获取制定元素的位置，从零开始
i=$(this).index();
change();
},function(){
start();
});
});
/*知识点：
当鼠标指针悬停在上面时，改变 <p> 元素的背景颜色：(都好那个表示离开时执行的函数！)
$("p").hover(function(){
$("p").css("background-color","yellow");
},function(){
$("p").css("background-color","pink");
});*/
</script>
</body>
</html>
css代码：
.container {
position: absolute;
top: 100px;
left: 100px;
width: 600px;
height: 270px;
}
/*使用绝对定位，使全部图片叠加到一块*/
.box, .box img {
position: absolute;
top: 0;
left: 0;
}
/*下面小圆点，使用绝对定位，位于图片的正下方*/
.circle {
width: 200px;
height: 14px;
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -100px;
text-align: center;
cursor: pointer;
}
/*每个小圆点的样式*/
.circle b {
display: inline-block;
width: 14px;
height: 14px;
background-color: #000;
border-radius: 50%;
margin: 3px;
}
/*小圆点的当前样式，也是鼠标移上去的样式*/
.circle .current {
background-color: #fff;
}
/*左右两侧的按钮，采用绝对定位*/
.btn {
position: absolute;
top: 50%;
width: 40px;
height: 50px;
margin-top: -25px;
background-color: rgba(255, 255, 255, .7);
text-align: center;
line-height: 50px;
font-size: 50px;
cursor: pointer;
}
.left {
position: absolute;
top: 100px;
width: 30px;
height: 30px;
left: 0;
color: red;
background-color: #fff;
}
.right {
position: absolute;
top: 100px;
width: 30px;
height: 30px;
right: 0;
color:red;
background-color: #fff;
}
