jquery新聞資訊動(dòng)態(tài)列表TAB切換代碼

使用方法：

1、head引入css文件

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

2、head引入js文件

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

3、body引入HTML代碼

<div class="information-box">
	<div class="information-con">
		<div class="information-head">
			<h2>電商資訊</h2>
			<p>及時(shí)了解國(guó)內(nèi)外電商行業(yè)動(dòng)態(tài)</p>
		</div>
		<div class="information-main clearfix">
			<div class="information-main-fl">
				<div class="bd">
					<ul>
						<li>
							<img src="images/banner.jpg" alt="">
							<div class="information-main-back"></div>
							<p class="information-main-text">
								H5建站/商城產(chǎn)品買多年送多年 <a href="javascript:;" class="main-btn">活動(dòng)詳情</a>
							</p>
						</li>
						<li>
							<img src="images/banner.jpg" alt="">
							<div class="information-main-back"></div>
							<p class="information-main-text">
								H5建站/商城產(chǎn)品買多年送多年 <a href="javascript:;" class="main-btn">活動(dòng)詳情</a>
							</p>
						</li>
						<li>
							<img src="images/banner.jpg" alt="">
							<div class="information-main-back"></div>
							<p class="information-main-text">
								H5建站/商城產(chǎn)品買多年送多年 <a href="javascript:;" class="main-btn">活動(dòng)詳情</a>
							</p>
						</li>
					</ul>
				</div>
				<a href="javascript:void(0)" class="prev"></a>
				<a href="javascript:void(0)" class="next"></a>
			</div>
			<div class="information-main-fr">
				<div class="hd clearfix">
					<ul>
						<li class="on">新聞中心</li>
						<li>行業(yè)資訊</li>
						<li>電商干貨</li>
					</ul>
				</div>
				<div class="bd">
					<ul>
						<li>
							<span>2018-05-23</span>
							<a href="#" title="團(tuán)隊(duì)拓展訓(xùn)練，云指團(tuán)隊(duì)合力展風(fēng)采">團(tuán)隊(duì)拓展訓(xùn)練，云指團(tuán)隊(duì)合力展風(fēng)采</a>
						</li>
						<li>
							<span>2018-04-16</span>
							<a href="#" title="烈祝賀云指實(shí)力當(dāng)選“廣東企業(yè)創(chuàng)新500強(qiáng)...">烈祝賀云指實(shí)力當(dāng)選“廣東企業(yè)創(chuàng)新500強(qiáng)...</a>
						</li>
						<li>
							<span>2018-04-10</span>
							<a href="#" title="專注身邊人和事，云指商圈小程序隆重上線">專注身邊人和事，云指商圈小程序隆重上線</a>
						</li>
						<li>
							<span>2018-04-10</span>
							<a href="#" title="擊餐飲經(jīng)營(yíng)難題？云指餐飲小程序打造全新經(jīng)...">擊餐飲經(jīng)營(yíng)難題？云指餐飲小程序打造全新經(jīng)...</a>
						</li>
						<li>
							<span>2018-04-03</span>
							<a href="#" title="云指佛山50公里徒步公益活動(dòng)">云指佛山50公里徒步公益活動(dòng)</a>
						</li>
					</ul>
					<ul>
						<li>
							<span>2018-05-23</span>
							<a href="#" title="DS全球數(shù)字峰會(huì)：.top域名榮獲“20...">DS全球數(shù)字峰會(huì)：.top域名榮獲“20...</a>
						</li>
						<li>
							<span>2018-04-16</span>
							<a href="#" title="面告訴您如何為您的創(chuàng)業(yè)公司選擇一個(gè)出色的...">面告訴您如何為您的創(chuàng)業(yè)公司選擇一個(gè)出色的...</a>
						</li>
						<li>
							<span>2018-04-10</span>
							<a href="#" title="使用新的域名尾綴創(chuàng)建有效的品牌微型網(wǎng)站">使用新的域名尾綴創(chuàng)建有效的品牌微型網(wǎng)站</a>
						</li>
						<li>
							<span>2018-04-10</span>
							<a href="#" title="adix 特別篇：有助于商業(yè)上取得成功的...">adix 特別篇：有助于商業(yè)上取得成功的...</a>
						</li>
						<li>
							<span>2018-04-03</span>
							<a href="#" title="爆！單字符域名c.top被區(qū)塊鏈終端啟用">爆！單字符域名c.top被區(qū)塊鏈終端啟用</a>
						</li>
					</ul>
					<ul>
						<li>
							<span>2018-05-23</span>
							<a href="#" title="小程序關(guān)鍵詞怎么選好？">小程序關(guān)鍵詞怎么選好？</a>
						</li>
						<li>
							<span>2018-04-16</span>
							<a href="#" title="為什么客戶要選用云指微信小程序">為什么客戶要選用云指微信小程序</a>
						</li>
						<li>
							<span>2018-04-10</span>
							<a href="#" title="做微信分銷商城選擇哪個(gè)分銷系統(tǒng)好">做微信分銷商城選擇哪個(gè)分銷系統(tǒng)好</a>
						</li>
						<li>
							<span>2018-04-10</span>
							<a href="#" title="為什么要用云指H5響應(yīng)式網(wǎng)站呢？">為什么要用云指H5響應(yīng)式網(wǎng)站呢？</a>
						</li>
						<li>
							<span>2018-04-03</span>
							<a href="#" title="微商必看！做好微信分銷商城的8個(gè)基礎(chǔ)">微商必看！做好微信分銷商城的8個(gè)基礎(chǔ)</a>
						</li>
					</ul>
				</div>
				<div class="information-more">
					<a href="#">查看更多</a>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">

	jQuery(".information-main-fl").slide({
		mainCell: ".bd ul",
		effect: "leftLoop",
		autoPlay: true,
		trigger: "click",
		mouseOverStop: false
	});//輪播

	jQuery(".information-main-fr").slide({
		autoPlay: false,
		trigger: "mouseover",
		delayTime: 700,
		pnLoop: false
	})//tab切換

</script>