实现原理
如图，试想一下，若是将<ul>的width属性值设置的很宽，直到可以装下你所有的图片，而每一个图片又用<li>包着并且设置了左浮动。
那么当我们向左移动ul的时候并且移动的距离为<li>的宽度，第二个<li>不就被移动到了<div>的窗口，这样一来图片不就被一张一张显示出来了吗？
接下来我们在设置<div>的属性
overflow:hidden，那么<div>窗口以外的图片不显示，只显示移动到当前窗口的图片，是不是又完美了一些，感觉快做好了是吧！
说了一些原理，好了，直接上代码，记得引入jquery。
这是div做的布局，做的时候记得加上边框，做后在删掉，这样便于测试
<div class="slideShow">
<div class="nav-t">
<ul>
<li><a href="#" target="_blank"><img src="images/1.png" alt=""></a></li>
<li><a href="#" target="_blank"><img src="images/2.png" alt=""></a></li>
<li><a href="#" target="_blank"><img src="images/3.png" alt=""></a></li>
<li><a href="#" target="_blank"><img src="images/4.png" alt=""></a></li>
<li><a href="#" target="_blank"><img src="images/5.png" alt=""></a></li>
</ul>
<div class="nav-b">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-min.js"></script>
<script type="text/javascript" src="lunbo.js"></script>接下来设置一下样式
<style>
.slideShow{
border:0px solid blue;
width:600px;
height:450px;
margin:50px auto;
position:relative;
}
.nav-t{
border:0px solid red;
width:580px;
height:430px;
margin:8px auto;
position:relative;
overflow:hidden;
}
.nav-t ul{
border:0px solid green;
list-style:none;
width:3000px;
height:430px;
margin:0;
padding:0;
position:relative;
}
.nav-t li{
height:427px;
width:580px;
float:left;
}
.nav-b{
position:absolute;
top:390px;
left:220px;
cursor:default;
}
.nav-b span{
margin-right:5px;
border:1px solid red;
padding:0 6px;
border-radius:12px;
