jquery仿百度AI網(wǎng)站banner圖片代碼

使用方法：

1、head引入css文件

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

2、head引入js文件

<script type="text/javascript" src="statics/js/jquery1.42.min.js"></script>
<script type="text/javascript" src="statics/js/jquery.SuperSlide.2.1.3.js"></script>

3、body引入HTML代碼

<div id="slideBox" class="slideBox">
	<div class="hd">
		<ul>
			<li>
				<span>EdgeBoard火熱開售</span>
				<div class="dot">
					<div class="liner"></div>
				</div>
			</li>
			<li>
				<span>人臉考勤解決方案</span>
				<div class="dot">
					<div class="liner"></div>
				</div>
			</li>
			<li>
				<span>車輛分析 全新上線</span>
				<div class="dot">
					<div class="liner"></div>
				</div>
			</li>
			<li>
				<span>OCR 3款新品火熱邀測</span>
				<div class="dot">
					<div class="liner"></div>
				</div>
			</li>
			<li>
				<span>人臉離線識別SDK 2.0</span>
				<div class="dot">
					<div class="liner"></div>
				</div>
			</li>
			<li>
				<span>地標(biāo)識別技術(shù)上線</span>
				<div class="dot">
					<div class="liner"></div>
				</div>
			</li>
		</ul>
	</div>
	<div class="bd">
		<ul>
			<li style="background-color: rgb(183, 159, 255);">
				<a href="#" target="_blank"><img src="statics/images/1.jpg" /></a>
			</li>
			<li style="background-color: rgb(56, 29, 140);">
				<a href="#" target="_blank"><img src="statics/images/2.png" /></a>
			</li>
			<li style="background-color: rgb(56, 42, 186);">
				<a href="#" target="_blank"><img src="statics/images/3.png" /></a>
			</li>
			<li style="background-color: rgb(179, 166, 251);">
				<a href="#" target="_blank"><img src="statics/images/4.jpg" /></a>
			</li>
			<li style="background-color: rgb(91, 66, 207);">
				<a href="#" target="_blank"><img src="statics/images/5.jpg" /></a>
			</li>
			<li style="background-color: rgb(37, 70, 187);">
				<a href="#" target="_blank"><img src="statics/images/6.jpg" /></a>
			</li>
		</ul>
	</div>

	<!-- 下面是前/后按鈕代碼，如果不需要刪除即可 -->
	<a class="prev" href="javascript:void(0)"></a>
	<a class="next" href="javascript:void(0)"></a>

</div>

<script type="text/javascript">
	jQuery(".slideBox").slide({
		mainCell: ".bd ul",
		effect: "fold",
		trigger: "click",
		autoPlay: true,
		mouseOverStop: false,
		startFun:function(i,c){
			$('.bd ul li').removeClass('active').eq(i).addClass('active');
		}
	});
</script>