效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slider</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#slideshow{
position: relative;
width: 512px;
height: 384px;
margin: 0 auto;
overflow: hidden;
}
#slideshow>ul,#slideshow>ul>li,#slideshow-nav{
position: absolute;
}
#slideshow>ul>li{
list-style: none;
}
#slideshow-nav{
bottom: 20px;
width: 100%;
text-align: center;
}
#slideshow-nav>span{
display: inline-block;
width: 15px;
height: 15px;
margin: 0 7px;
font-size: 0;
background-color: rgba(255,255,255,.3);
border-radius: 50%;
user-select: none;
-webkit-user-select: none;
transition: all .5s;
-webkit-transition: all .5s;
cursor: pointer;
}
#slideshow-nav>span.active{
background-color: #fff;
}
</style>
</head>
<body>
<div id="slideshow">
<ul>
<li><img src="http://cdn.attach.qdfuns.com/notes/pics/201611/26/231154e8ab2zanwd59a2w2.jpg" alt="gakki is mine"></li>
<li><img src="http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236ugj2glgcl6g66gg4.jpg" alt="gakki is mine"></li>
<li><img src="http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236c26bx5bbfp6kazzm.jpg" alt="gakki is mine"></li>
<li><img src="http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236oqd8i8q158ojr0i7.jpg" alt="gakki is mine"></li>
<li><img src="http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236o1iud19lkz11wqja.jpg" alt="gakki is mine"></li>
</ul>
<div id="slideshow-nav"></div>
</div>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var timer = null,
curindex = 0,
duration = 2000,
speed = 500;
var $imgWrap = $('#slideshow>ul');
var totalIndex = $imgWrap.find('li').length;
var width = $('#slideshow').width();
//insert navigate span, let img in order
$('#slideshow').find('ul>li').each(function(index){
$(this).css('left', width*index + 'px');
$('#slideshow-nav').append('<span>' + (index+1) + '</span>');
})
//
$('#slideshow-nav>span').eq(0).addClass('active');
//auto slide
var move = function(){
curindex += 1;
if (curindex===totalIndex) {
curindex = 0;
}
// current span add classname "active"
$('#slideshow-nav>span').each(function(index) {
