jQuery制作簡潔實用的產(chǎn)品圖文列表滾動展示，帶左右箭頭按鈕和圓點索引控制圖片滾動特效。
使用方法：
1、head引入css文件
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
2、head引入js文件
<script src="statics/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="statics/js/jquery.SuperSlide.2.1.3.js" type="text/javascript" charset="utf-8"></script>
3、body引入部分
<div class="pro-new">
<div class="container">
<div class="title">新品展示</div>
<div class="sub-title">
<span>——</span>
<span class="text">New Products</span>
<span>——</span>
</div>
<div class="pro-new-show">
<!--新品列表-->
<div class="pro-list">
<ul>
<li>
<a href="#">
<div class="img">
<img src="statics/images/pic1.png" />
</div>
<div class="desc">
<p class="p-title">產(chǎn)品名稱</p>
<p class="p-desc">這是產(chǎn)品介紹這是產(chǎn)品介紹這是產(chǎn)品介紹，這是產(chǎn)品介紹這是產(chǎn)品介紹這是產(chǎn)品介紹，這是產(chǎn)品介紹...</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img">
<img src="statics/images/pic2.png" />
</div>
<div class="desc">
<p class="p-title">產(chǎn)品名稱</p>
<p class="p-desc">這是產(chǎn)品介紹這是產(chǎn)品介紹這是產(chǎn)品介紹，這是產(chǎn)品介紹這是產(chǎn)品介紹這是產(chǎn)品介紹，這是產(chǎn)品介紹...</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img">
<img src="statics/images/pic3.png" />
</div>
<div class="desc">
<p class="p-title">產(chǎn)品名稱</p>
<p class="p-desc">這是產(chǎn)品介紹這是產(chǎn)品介紹這是產(chǎn)品介紹，這是產(chǎn)品介紹這是產(chǎn)品介紹這是產(chǎn)品介紹，這是產(chǎn)品介紹...</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img">
<img src="statics/images/pic1.png" />
</div>
<div class="desc">
<p class="p-title">產(chǎn)品名稱</p>
<p class="p-desc">這是產(chǎn)品介紹這是產(chǎn)品介紹這是產(chǎn)品介紹，這是產(chǎn)品介紹這是產(chǎn)品介紹這是產(chǎn)品介紹，這是產(chǎn)品介紹...</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img">
<img src="statics/images/pic2.png" />
</div>
<div class="desc">
<p class="p-title">產(chǎn)品名稱</p>
<p class="p-desc">這是產(chǎn)品介紹這是產(chǎn)品介紹這是產(chǎn)品介紹，這是產(chǎn)品介紹這是產(chǎn)品介紹這是產(chǎn)品介紹，這是產(chǎn)品介紹...</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img">
<img src="statics/images/pic3.png" />
</div>
<div class="desc">
<p class="p-title">產(chǎn)品名稱</p>
<p class="p-desc">這是產(chǎn)品介紹這是產(chǎn)品介紹這是產(chǎn)品介紹，這是產(chǎn)品介紹這是產(chǎn)品介紹這是產(chǎn)品介紹，這是產(chǎn)品介紹...</p>
</div>
</a>
</li>
</ul>
</div>
<!--輪播左右箭頭-->
<div class="arrow">
<a class="prev" href="javascript:void(0)"></a>
<a class="next" href="javascript:void(0)"></a>
</div>
<!--輪播分頁-->
<div class="pagination">
<ul></ul>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//輪播
$(".pro-new-show").slide({
mainCell: ".pro-list ul",
titCell:".pagination ul",
autoPage: true,
effect: "left",
autoPlay: false,
vis: 3,
trigger: "click"
});
</script>
簡潔的產(chǎn)品圖片列表滾動ui特效 
