jQuery芝麻信用網(wǎng)站導航和圖片輪播布局代碼

使用方法：

1、head引入css文件

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

2、head引入js文件

<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="statics/js/jquery.SuperSlide.2.1.1.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代碼

<div class="m-head">
	<div class="m-head-slider">
		<a href="#"></a>
	</div>
	<div class="m-head-bar">
		<div class="c-wrapper">
			<a href="#">幫助中心</a>
			<a href="#">登錄</a>
			<span>|</span>
			<a href="#">免費入駐</a>
		</div>
	</div>
	<div class="m-head-nav">
		<ul class="c-wrapper">
			<li class="m-head-nav-logo">
				<a href="#"><img src="statics/images/logo.png" alt="LOGO"></a>
			</li>

			<li class="m-head-nav-item  active">
				<a href="#">首頁</a>
			</li>

			<li class="m-head-nav-item  ">
				<a href="#">信用服務</a>
			</li>

			<li class="m-head-nav-item  ">
				<a href="#">行業(yè)方案</a>
			</li>

			<li class="m-head-nav-item  ">
				<a href="#">產(chǎn)品中心</a>
			</li>

			<li class="m-head-nav-item  ">
				<a href="#">開發(fā)接入</a>
			</li>

			<li class="m-head-nav-item m-head-nav-right ">
				<a href="#">我的商家服務</a>
			</li>

		</ul>
	</div>
</div>
<div class="index-top">
	<div class="m-carousel slideBox">
		<div class="bd">
			<ul class="m-carousel-list">

				<li style="background-image: url(statics/images/slider1.jpeg);">
					<a href="#">
						<h2 class="c-line-clamp m-carousel-title">“信用+”是下一個十年最大的商業(yè)紅利</h2>
						<p class="c-line-clamp m-carousel-note">信用驅(qū)動的消費升級趨勢</p>
						<p class="m-carousel-btn">了解更多</p>
					</a>
				</li>

				<li style="background-image: url(statics/images/slider2.png);">
					<a href="#">
						<h2 class="c-line-clamp m-carousel-title">芝麻企業(yè)信用招募令</h2>
						<p class="c-line-clamp m-carousel-note">共享企業(yè)福利 助力小微成長</p>
						<p class="m-carousel-btn">了解更多</p>
					</a>
				</li>

			</ul>
		</div>
		<div class="c-carousel-dot hd"><span class="active"></span><span></span></div>
	</div>
	<div class="index-top-bar">
		<div class="c-wrapper">
			<div class="c-row">
				<div class="c-col16 index-top-news">
					<h6>芝麻新聞</h6>
					<ul class="c-gap-top-small">

						<li class="c-line-clamp">
							<a href="#">· 信用無形資產(chǎn)可“變現(xiàn)”阿里巴巴企業(yè)誠信體系引入芝麻信用</a>
						</li>

						<li class="c-line-clamp">
							<a href="#">· 我國381個城市已開通信用免押服務</a>
						</li>

					</ul>
				</div>
				<div class="c-col4 index-top-media">
					<h6>關(guān)注我們</h6>
					<div class="c-gap-top-small">
						<i class="c-icon"><div class="index-top-media-qrcode index-top-media-qrcode-alipay">關(guān)注支付寶生活號</div></i>
						<i class="c-icon"><div class="index-top-media-qrcode index-top-media-qrcode-wechat">關(guān)注公眾號</div></i>
						<i class="c-icon"><div class="index-top-media-qrcode index-top-media-qrcode-weibo">關(guān)注微博</div></i>
					</div>
				</div>
				<div class="c-col4 index-top-tel">
					<h6>服務熱線</h6>
					<p class="c-gap-top">
						<a href="#">0571-88158055</a> 轉(zhuǎn) 2</p>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	jQuery(".slideBox").slide({
		mainCell: ".bd ul",
		titCell: ".hd span",
		titOnClassName: "active",
		effect: "left",
		autoPlay: true,
		trigger: "click"
	});
</script>