Jquery实现左右轮播效果

 

        本文主要用Jquery框架实现左右轮播效果，这个框架可以通过http://jquery.com/下载。

首先展示下静态布局h5代码，代码非常简单。

<div id="slide">
		<ul class="pic-list">
			<li><img src="banner1.jpg"></li>
			<li><img src="banner2.jpg"></li>
			<li><img src="banner3.jpg"></li>
			<li><img src="banner1.jpg"></li>
		</ul>
		<div class="btn next">&gt;</div>
		<div class="btn prev">&lt;</div>
		<ul class="icon-list">
			<li class="active"></li>
			<li></li>
			<li></li>
		</ul>
	</div>

        以下代码为样式布局部分。通过先li左浮动，设置ul的overflow值为hidden，将其他图片隐藏。主要结构如下图，黑色框内部分为可见部分。其他部分为不可见。至于为什么多放一张图1，稍后会解释。