演示网站 首页导航加轮播
编写代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="wrapper" id="wrapper">
<div class="bg-white"></div>
<header class="header">
<div class="container">
<h1 class="logo"><a href="#"></a></h1>
<ul class="nav">
<li class="nav-item">
<a href="#">MZUI商城</a>
</li>
<li class="nav-item" data-subNav="nav_iphone">
<a href="#">MZUI手机</a>
</li>
<li class="nav-item" data-subNav="nav_subIphone">
<a href="#">手机</a>
</li>
<li class="nav-item" data-subNav="nav_voice">
<a href="#">MZUI声学</a>
</li>
<li class="nav-item" data-subNav="nav_parts">
<a href="#">智能 · 配件</a>
</li>
<li class="nav-item">
<a href="#">服务</a>
</li>
<li class="nav-item">
<a href="#">专卖店</a>
</li>
<li class="nav-item">
<a href="#">Flyme</a>
</li>
<li class="nav-item">
<a href="#">社区</a>
</li>
</ul>
<div class="user">
<div class="user-hover"></div>
<div class="user-img">
<img src="images/user.png" alt="#">
<span class="arrow-bg"></span>
<span class="arrow-font"></span>
</div>
<div class="user-info">
<ul>
<li class="login"><a href="#">立即登录</a></li>
<li class="register">没有账号?<a href="#">立即注册</a></li>
<li><a href="#">我的购物车</a></li>
<li><a href="#">我的订单</a></li>
<li><a href="#">M码通道</a></li>
</ul>
</div>
</div>
</div>
</header>
<div class="sub-nav">
<div class="sub-nav__wrap" data-link="nav_iphone">
<a href="#">
<img src="images/cont/1-1.png" alt="#">
<span>PRO 6 Plus</span>
</a>
<a href="#">
<img src="images/cont/1-2.png" alt="#">
<span>PRO 6s</span>
</a>
<a href="#">
<img src="images/cont/1-3.png" alt="#">
<span>MX6</span>
</a>
<a href="#">
<img src="images/cont/1-4.png" alt="#">
<span>PRO6</span>
</a>
<a href="#">
<img src="images/cont/1-5.png" alt="#">
<span>PRO5</span>
</a>
</div>
<div class="sub-nav__wrap" data-link="nav_subIphone">
<a href="#">
<img src="images/cont/2-1.png" alt="#">
<span>MZUI Note5</span>
</a>
<a href="#">
<img src="images/cont/2-2.png" alt="#">
<span>PRO 6s</span>
</a>
<a href="#">
<img src="images/cont/2-3.png" alt="#">
<span>MX6</span>
</a>
<a href="#">
<img src="images/cont/2-4.png" alt="#">
<span>PRO6</span>
</a>
<a href="#">
<img src="images/cont/2-5.png" alt="#">
<span>PRO5</span>
</a>
<a href="#">
<img src="images/cont/2-6.png" alt="#">
<span>PRO5</span>
</a>
<a href="#">
<img src="images/cont/2-7.png" alt="#">
<span>PRO5</span>
</a>
</div>
<div class="sub-nav__wrap" data-link="nav_voice">
<a href="#">
<img src="images/cont/3-1.png" alt="#">
<span>PRO 6 Plus</span>
</a>
<a href="#">
<img src="images/cont/3-2.png" alt="#">
<span>PRO 6s</span>
</a>
<a href="#">
<img src="images/cont/3-3.png" alt="#">
<span>MX6</span>
</a>
</div>
<div class="sub-nav__wrap" data-link="nav_parts">
<a href="#">
<img src="images/cont/4-1.png" alt="#">
<span>PRO 6 Plus</span>
</a>
<a href="#">
<img src="images/cont/4-2.png" alt="#">
<span>PRO 6s</span>
</a>
<a href="#">
<img src="images/cont/4-3.png" alt="#">
<span>MX6</span>
</a>
<a href="#">
<img src="images/cont/4-4.png" alt="#">
<span>PRO6</span>
</a>
<a href="#">
<img src="images/cont/4-5.png" alt="#">
<span>PRO5</span>
</a>
<a href="#">
<img src="images/cont/4-6.png" alt="#">
<span>PRO5</span>
</a>
</div>
</div>
</div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/slider.js"></script>
<script src="js/navChange.js"></script>
<script>
$(function () {
var slider1 = new Slider();
var doc_h = $(document.body).width();
slider1.inital('sliderBox', {
slider_num: 4,
w: doc_h,
h: 760
});
});
</script>
</body>
</html>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
