这次的轮播图是在上一篇文章jQuery手动点击实现图片轮播特效的基础上写出来的，也就是本次展示的是手动点击轮播效果以及定时自动轮播效果的程序，建议想连贯学习的小伙伴把我之前的文章看一看，看完后再看这篇文章~~~~
下面来看看我做的最终定时自动轮播效果以及手动点击轮播效果：
对于上面的展示动画速度比较快的原因是因为我的截图软件是绿色版，免费的~~~你们懂得，就是卡卡的，真正的效果比这个速度慢，而且还是匀速，可以商用~~~所以上面的展示动画只能当做完成效果的参考。
一、主体程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>轮播图①（手动点击轮播）</title>
<link type="text/css" rel="stylesheet" href="css/layout.css" />
</head>
<body>
<div class="slideShow">
<!--图片布局开始-->
<ul>
<li><a href="#"><img src="img/picture01.jpg" /></a></li>
<li><a href="#"><img src="img/picture02.jpg" /></a></li>
<li><a href="#"><img src="img/picture03.jpg" /></a></li>
<li><a href="#"><img src="img/picture04.jpg" /></a></li>
</ul>
<!--图片布局结束--> <!--按钮布局开始-->
<div class="showNav">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<!--按钮布局结束-->
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/layout.js"></script>
</body>
</html>
额，上面的主体程序和前一篇没有区别，未做任何修改~~~~~感兴趣的可以查看第一篇文章，我本次随笔重点会在Jquery程序里面
二、CSS样式
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.slideShow{
width: 346px;
height: 210px; /*其实就是图片的高度*/
border: 1px #eeeeee solid;
margin: 100px auto;
position: relative;
overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/
}
.slideShow ul{
width: 2000px;
position: relative; /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
}
.slideShow ul li{
float: left; /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
