jQuery選項(xiàng)卡圖片滾動(dòng)切換代碼

使用方法：

1、head引入css文件

<link type="text/css" href="css/style.css" rel="stylesheet" />

2、head引入js文件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>

3、body引入HTML代碼

<div class="tab-pic" style="margin:0 auto"> 

	<ul class="tag-nav"> 
		<li class="tag-s1"><a href="#">羽絨服/棉服</a></li> 
		<li class="tag-s2"><a href="#">針織衫/毛衣</a></li> 
		<li class="tag-s3"><a href="#">呢大衣/厚外套</a></li> 
		<li class="tag-s4"><a href="#">下裝</a></li> 
		<li class="tag-s5"><a href="#">童裝</a></li> 
		<li class="tag-s6"><a href="#">鞋包/配飾/內(nèi)衣</a></li> 
		<li class="tag-s7"><a href="#">家居/美容/保健</a></li> 
	</ul> 
	
	<div class="tag-clip"> 
		<div class="piclist"> 
			<ul> 
				<li><a href="#"><img src="images/1.1.jpg" /></a></li> 
				<li><a href="#"><img src="images/1.2.jpg" /></a></li> 
				<li><a href="#"><img src="images/1.3.jpg" /></a></li> 
				<li><a href="#"><img src="images/1.4.jpg" /></a></li> 
				<li><a href="#"><img src="images/1.5.jpg" /></a></li> 
			</ul> 
			<ul> 
				<li><a href="#"><img src="images/2.1.jpg" /></a></li> 
				<li><a href="#"><img src="images/2.2.jpg" /></a></li> 
				<li><a href="#"><img src="images/2.3.jpg" /></a></li> 
				<li><a href="#"><img src="images/2.4.jpg" /></a></li> 
				<li><a href="#"><img src="images/2.5.jpg" /></a></li> 
			</ul> 
			<ul> 
				<li><a href="#"><img src="images/3.1.jpg" /></a></li> 
				<li><a href="#"><img src="images/3.2.jpg" /></a></li> 
				<li><a href="#"><img src="images/3.3.jpg" /></a></li> 
				<li><a href="#"><img src="images/3.4.jpg" /></a></li> 
				<li><a href="#"><img src="images/3.5.jpg" /></a></li> 
			</ul> 
			<ul> 
				<li><a href="#"><img src="images/1.1.jpg" /></a></li> 
				<li><a href="#"><img src="images/1.1.jpg" /></a></li> 
				<li><a href="#"><img src="images/1.1.jpg" /></a></li> 
				<li><a href="#"><img src="images/1.1.jpg" /></a></li> 
				<li><a href="#"><img src="images/1.1.jpg" /></a></li> 
			</ul> 
			<ul> 
				<li><a href="#"><img src="images/1.2.jpg" /></a></li> 
				<li><a href="#"><img src="images/1.2.jpg" /></a></li> 
				<li><a href="#"><img src="images/1.2.jpg" /></a></li> 
				<li><a href="#"><img src="images/1.2.jpg" /></a></li> 
				<li><a href="#"><img src="images/1.2.jpg" /></a></li> 
			</ul> 
			<ul> 
				<li><a href="#"><img src="images/1.3.jpg" /></a></li> 
				<li><a href="#"><img src="images/1.3.jpg" /></a></li> 
				<li><a href="#"><img src="images/1.3.jpg" /></a></li> 
				<li><a href="#"><img src="images/1.3.jpg" /></a></li> 
				<li><a href="#"><img src="images/1.3.jpg" /></a></li> 
			</ul> 
			<ul> 
				<li><a href="#"><img src="images/1.4.jpg" /></a></li> 
				<li><a href="#"><img src="images/1.4.jpg" /></a></li> 
				<li><a href="#"><img src="images/1.4.jpg" /></a></li> 
				<li><a href="#"><img src="images/1.4.jpg" /></a></li> 
				<li><a href="#"><img src="images/1.4.jpg" /></a></li> 
			</ul> 
		</div> 
	</div> 
	
</div> 

<script type="text/javascript">jQuery(".tab-pic").slide({ titCell:".tag-nav li",mainCell:".piclist",effect:"left",easing:"easeInOutSine",delayTime:800 });</script>