特效描述:带标题焦点图 滚动切换。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>