jquery SuperSlide带标题焦点图滚动切换插件

代码结构

1. 引入CSS

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

2. 引入JS

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

3. HTML代码

<div id="slideBox" class="slideBox">
	<div class="bd">
		<ul>
			<li>
				<a href="https://www.51qianduan.com/">51前端</a>
				<div class="burder_content">
					<span class="burder_content_type">小编推荐</span>
					<a href="https://www.51qianduan.com/">51前端</a>
					<p class="burder_content_content">各位玩家们新年好。梦想微评测新春特别节目《梦想之最年度评选》，在近期就将发布第一集了。敬请各位玩家朋友们期待！</p>
					<a href="https://www.51qianduan.com/">51前端</a>
				</div>
			</li>
			<li>
				<a href="https://www.51qianduan.com/">51前端</a>
				<div class="burder_content">
					<span class="burder_content_type">游戏春晚</span>
					<a href="https://www.51qianduan.com/">51前端</a>
					<p class="burder_content_content">由游戏地域工作室制作的“2014游戏地域春晚”节目单近日正式发布。与往年不同，除了传统的游戏节目之外，本次晚会更是首推payday2游戏短剧，又有各类大牌登场亮相，不可谓不精彩。</p>
					<a href="https://www.51qianduan.com/">51前端</a>
				</div>
			</li>
			<li>
				<a href="https://www.51qianduan.com/">51前端</a>
				<div class="burder_content">
					<span class="burder_content_type">资源下载</span>
					<a href="https://www.51qianduan.com/">51前端</a>
					<p class="burder_content_content">Strike Games制作发行的一款第一人称射击防御游戏，游戏中玩家需要击退一波波的敌人，从而升级武器，取得胜利。</p>
					<a href="https://www.51qianduan.com/">51前端</a>
				</div>
			</li>
			<li>
				<a href="https://www.51qianduan.com/">51前端</a>
				<div class="burder_content">
					<span class="burder_content_type">资源下载</span>
					<a href="https://www.51qianduan.com/">51前端</a>
					<p class="burder_content_content">游戏可以在第三和第一视觉间转换。玩家可以定制自己的角色，组合、创作武器、载具和建筑。同时，玩家必须对抗大量不同智慧程度的敌人并保护幸存的殖民者们。游戏里还会有任务系统，玩家达成npc给予的任务来推动剧情发展；此外游戏还有多人游戏模式，让玩家们可以联机一起历险和搭建。</p>
					<a href="https://www.51qianduan.com/">51前端</a>
				</div>
			</li>
			<li>
				<a href="https://www.51qianduan.com/">51前端</a>
				<div class="burder_content">
					<span class="burder_content_type">小编推荐</span>
					<a href="https://www.51qianduan.com/">51前端</a>
					<p class="burder_content_content">《汽车修理工模拟2014》是一款汽车修理工模拟类游戏。在游戏中玩家要扮演一个新人修理工，在汽车修理厂修改大大小小各式车辆，并在修理完之后进行试驾。</p>
					<a href="https://www.51qianduan.com/">51前端</a>
				</div>
			</li>
			<li>
				<a href="https://www.51qianduan.com/">51前端</a>
				<div class="burder_content">
					<span class="burder_content_type">小编推荐</span>
					<a href="https://www.51qianduan.com/">51前端</a>
					<p class="burder_content_content">由Zen Studio制作的音乐战斗游戏《击打节奏》（KickBeat）已登录PC的Steam平台。玩家通过与背景音乐节奏的合拍来完成一系列的武术动作，同时一系列自定义的连招也成为了可能。游戏将包括一系列授权音乐，知名的乐手有Rob Zombie, Marilyn Manson，当然玩家也可以导入自己电脑上的曲目。</p>
					<a href="https://www.51qianduan.com/">51前端</a>
				</div>
			</li>
		</ul>
	</div>
	<div class="hd">
		<ul>
			<li><a href="https://www.51qianduan.com/">51前端</a></li>
			<li><a href="https://www.51qianduan.com/">51前端</a></li>
			<li><a href="https://www.51qianduan.com/">51前端</a></li>
			<li><a href="https://www.51qianduan.com/">51前端</a></li>
			<li><a href="https://www.51qianduan.com/">51前端</a></li>
			<li style="border-right:1px solid #d5d5d5; width:163px;"><a href="https://www.51qianduan.com/">51前端</a></li>
		</ul>
	</div>
</div>
<script type="text/javascript">$(".slideBox").slide({ mainCell:".bd ul",effect:"left",autoPlay:true} );</script>