这是一款jquery来制作的仿迅雷官方网站全屏响应式轮播图动画特效。该轮播图特效简单实用,效果时尚大方,且可以兼容ie8浏览器。
使用方法
在页面中引入样式文件nheader.css、nstyle.css和jquery.min.js文件。
<link rel="stylesheet" href="css/nheader.css"> <link rel="stylesheet" href="css/nstyle.css"> <script src="js/jquery.min.js"></script>
HTML结构
该全屏响应式轮播图的HTML结构如下:
<div class="header"> <ul class="nav_list"> <li class="nav_li"> <a href="javascript:;" class="btn_nav" id="nav_more"><i class="ic_more png"></i>更多</a> <div class="more_nav" id="more_nav"> <!--[if lt IE 9]> <span class="opc_bg"></span> <![endif]--> <i class="ic_bdot png" id="h_bdot"></i> <ul id="h_nav"> <li><a href="#" class="btn_snav">赚钱宝</a></li> <li><a href="#" class="btn_snav">新闻动态</a></li> <li><a href="#" class="btn_snav">人力资源</a></li> <li><a href="#" class="btn_snav">投资关系</a></li> <li><a href="#" class="btn_snav">联系我们</a></li> <li> <i class="ic_sdot png" id="h_sdot"></i> <dl class="sub_nav" id="h_subnav"> <dt><a href="#" class="btn_snav">迅雷9</a></dt> <dd><a href="#">公司简介</a></dd> <dd><a href="#">发展历程</a></dd> <dd><a href="#">管理团队</a></dd> <dd><a href="#">联系我们</a></dd> </dl> </li> </ul> </div> </li> </ul> </div> <div class="wrap" id="wrap"> <div class="wrapper"> <div class="product_list" id="product_list"> <div class="product_box shoulei show"> <div class="bg_box"><img src="img/bg_shoulei.jpg"></div> <div class="content"> <div class="main_box"> <h2 class="hide_txt png"> <span class="txt_1 png">炽</span> <span class="txt_2 png">热</span> <span class="txt_3 png">追</span> <span class="txt_4 png">片</span> <span class="txt_5 png">之</span> <span class="txt_6 png">心</span> <span class="txt_7 png">没</span> <span class="txt_8 png">有</span> <span class="txt_9 png">wifi</span> <span class="txt_10 png">也</span> <span class="txt_11 png">挡</span> <span class="txt_12 png">不</span> <span class="txt_13 png">住</span> </h2> <a href="#" class="btn_product" title="手机迅雷">手机迅雷</a> </div> </div> </div> <div class="product_box xnet"> <div class="bg_box"><img src="img/bg_xnet.jpg"></div> <div class="content"> <div class="main_box"> <h2 class="hide_txt png"> <span class="txt_1 png">极</span> <span class="txt_2 png">速</span> <span class="txt_3 png">不</span> <span class="txt_4 png">止</span> <span class="txt_5 png">一</span> <span class="txt_6 png">次</span> <span class="txt_7 png">的</span> <span class="txt_8 png">挑</span> <span class="txt_9 png">战</span> </h2> <a href="#" class="btn_product" title="迅雷9">迅雷9</a> </div> </div> </div> <div class="product_box member"> <div class="bg_box"><img src="img/bg_member.jpg"></div> <div class="content"> <div class="main_box"> <h2 class="hide_txt png"> <span class="txt_1 png">快</span> <span class="txt_2 png">让</span> <span class="txt_3 png">生</span> <span class="txt_4 png">活</span> <span class="txt_5 png">慢</span> <span class="txt_6 png">下</span> <span class="txt_7 png">来</span> </h2> <a href="#" class="btn_product" title="迅雷会员">迅雷会员</a> </div> </div> </div> <div class="product_box xkn"> <div class="bg_box"><img src="img/bg_xkn.jpg"></div> <div class="content"> <div class="main_box"> <h2 class="hide_txt png"> <span class="txt_1 png">引</span> <span class="txt_2 png">爆</span> <span class="txt_3 png">风</span> <span class="txt_4 png">驰</span> <span class="txt_5 png">电</span> <span class="txt_6 png">掣</span> <span class="txt_7 png">的</span> <span class="txt_8 png">网</span> <span class="txt_9 png">速</span> </h2> <a href="#" class="btn_product" title="迅雷快鸟">迅雷快鸟</a> </div> </div> </div> <div class="product_box xav"> <div class="bg_box"><img src="img/bg_xav.jpg"></div> <div class="content"> <div class="main_box"> <h2 class="hide_txt png"> <span class="txt_1 png">流</span> <span class="txt_2 png">畅</span> <span class="txt_3 png">画</span> <span class="txt_4 png">质</span> <span class="txt_5 png">乐</span> <span class="txt_6 png">无</span> <span class="txt_7 png">止</span> <span class="txt_8 png">境</span> </h2> <a href="#" class="btn_product" title="迅雷影音">迅雷影音</a> </div> </div> </div> </div> <div class="product_btns" id="product_btns"> <div class="content"> <div class="btns_area"> <div class="btns_box" id="control_box"> <a href="#" class="btn_ipr btn_shoulei cur" title="迅雷素材" ><span class="ic_shoulei hide_txt png">手机迅雷</span></a> <a href="#" class="btn_xnet" title="迅雷7.9"><span class="ic_xnet hide_txt png">迅雷7.9</span></a> <a href="#" class="btn_member" title="迅雷会员"><span class="ic_member hide_txt png">迅雷会员</span></a> <a href="#" class="btn_xkn" title="迅雷快鸟"><span class="ic_xkn hide_txt png">迅雷快鸟</span></a> <a href="#" class="btn_xav" title="迅雷影音"><span class="ic_xav hide_txt png">迅雷影音</span></a> <span class="ic_line" id="ic_line"></span> </div> </div> </div> </div> <div class="rpt_bg png" id="rpt_bg"></div> </div> </div>