用jquery简单实现图片轮播效果，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} ul {
list-style: none;
} .slideShow {
width: 600px;
height: 350px; /*其实就是图片的宽度和高度*/
border: 1px #eeeeee solid;
margin: 100px auto;
position: relative;
overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/
} .slideShow ul {
width: 3000px;
position: relative; /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
} .slideShow ul li {
float: left; /*让五张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
width: 600px;
} .slideShow .showNav {
position: absolute; /*用绝对定位给数字按钮进行布局*/
right: 10px;
bottom: 5px;
text-align: center;
font-size: 12px;
line-height: 20px;
} .slideShow .showNav span {
cursor: pointer;
display: block;
float: left;
width: 20px;
height: 20px;
background: #ff5a28;
margin-left: 2px;
color: #fff;
} .slideShow .showNav .active {
background: #b63e1a;
}
</style>
</head>
<body>
<div class="slideShow">
<ul>
<li><a href="#"><img src="data:image/pic1.png" alt=""></a></li>
<li><a href="#"><img src="data:image/pic2.png" alt=""></a></li>
<li><a href="#"><img src="data:image/pic3.png" alt=""></a></li>
<li><a href="#"><img src="data:image/pic4.png" alt=""></a></li>
<li><a href="#"><img src="data:image/pic5.png" alt=""></a></li>
</ul>
<div class="showNav">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var slideShow = $(".slideShow"), //获取最外层框架的名称
ul = slideShow.find('ul'),
showNumber = slideShow.find('.showNav span'), //获取按钮
oneWidth = slideShow.find('ul li').eq(0).width(); //获取每个图片的宽度
var timer = null; //定时器返回值，主要用于关闭定时器
var iNow = 0; //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
showNumber.on('click', function () { //为每个按钮绑定一个点击事件
$(this).addClass('active').siblings().removeClass('active'); //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
var index = $(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值
iNow = index;
ul.animate({'left': -oneWidth * iNow,}) //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNOWx确定
}); function autoplay() {
timer = setInterval(function () { //打开定时器
iNow++; //让图片的索引值次序加1，这样就可以实现顺序轮播图片
if (iNow > showNumber.length - 1) { //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
iNow = 0;
}
showNumber.eq(iNow).trigger('click'); //模拟触发数字按钮的click
}, 2000); //2000为轮播的时间
} autoplay();
slideShow.hover(function () {
clearInterval(timer);
}, autoplay())
})
</script>
</div>
</body>
</html>
未完待续。。。