开发过程中需要用到图片轮播的插件，在网上找了几个插件之后还是决定自己码一个，比较简洁的功能，以后说不定还会有用。
ps：
功能比较简单，整个框并不能根据图片的大小自动调节，这里所用的图片是1170*500的，如果需要改成其他大小的图片，自行修改.pic-list下img的宽度。
.pic-list中的宽度为整个横幅的宽度，如果需要轮播的图片数量很多，.pic-list的宽度应大于数量*单张宽度，
html
<div class="banner">
<!--第一张图片为最后一张，用来做轮播连接使用，所以一开始显示的第一章，应是第二张图片，这里图片的宽度为1170px，所以一开始left为-1170px，同理最后一张图也为第一张图。-->
<div class="pic-list" style="left: -1170px">
<img src="/static/img/4.jpg" alt="">
<img src="/static/img/1.jpg" alt="">
<img src="/static/img/2.jpg" alt="">
<img src="/static/img/3.jpg" alt="">
<img src="/static/img/4.jpg" alt="">
<img src="/static/img/1.jpg" alt="">
</div>
<div id="buttons">
<!-- 确保span的数量跟img数量一样多，不包括第一张img和最后一张img-->
<span class='on'></span>
<span></span>
<span></span>
<span></span>
</div>
<a href="javascript:;" class="arrow" id="prev"><</a>
<a href="javascript:;" class="arrow" id="next">></a>
</div>
css
.banner{
width: 100%;
height: 500px;
overflow: hidden;
position: relative;}
.banner a{
text-decoration: none;
}
.banner .pic-list{
width: 10000px;
height: 500px;
position: absolute;
z-index: 1;
}
.banner .pic-list img{
width: 1170px;
float: left;
}
#buttons{
position: absolute;
z-index: 2;
height: 10px;
bottom: 20px;
left: 550px;
}
#buttons span{
cursor: pointer;
float: left;
border: 1px solid #fff;
width: 10px;
height: 10px;
border-radius: 50%;
background: #333;
margin-right: 5px;
}
#buttons .on{
background: orange;
}
.arrow{
cursor: pointer;
line-height: 36px;
text-align: center;
font-size: 20px;
font-weight: bold;
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
top: 200px;
background: rgba(0,0,0,0.5);
color: #fff;
display: none;
}
.banner:hover .arrow{display: block;}
#prev{
left: 20px;
}
#next{
right:20px;
}
js
