京东广告轮播自动，鼠标悬浮停止
html5代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>京东常见问题分类页面</title>
<link href="css/style.css" rel="stylesheet" />
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="top">
<div class="wrap">
<div class="top-l left">欢迎光临京东，请<a href="" class="top-login">登录</a><a href="">免费注册</a></div>
<ul class="top-m right">
<li><a href=""><i class="top-car left"></i>购物车</a></li>
<li class="line"></li>
<li><a href="">我的交易单</a></li>
<li class="line"></li>
<li><a href="">会员中心</a></li>
<li class="line"></li>
<li><a href=""><i class="top-tel left"></i>我的关注</a></li>
<li class="line"></li>
<li class="on">
<a href="" class="menu-btn">联系客服</a>
<ul class="topDown">
<li><a href="">帮助中心</a></li>
<li><a href="">我要吐槽</a></li>
<li><a href="">在线客服</a></li>
<li><a href="">咨询JIMI</a></li>
<li><a href="">客服邮箱</a></li>
</ul>
</li>
<li class="line"></li>
<li><a href="" class="menu-btn">手机金融</a></li>
<li class="line"></li>
<li><a href="" class="menu-btn">网站导航</a></li>
<li class="line"></li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="wrap">
<a href=""><img src="images/logo.png" alt="logo" /></a>
</div>
<div class="wrap">
<nav class="nav">
<header>常见问题分类</header>
<ul>
<li>
<dl>
<dt>京东金融</dt>
<dd><a href="#">京东金融简介</a></dd>
<dd><a href="#">京东金融会员</a></dd>
<dd><a href="#">京东金融安全中心</a></dd>
</dl>
</li>
<li>
<dl>
<dt>理财</dt>
<dd><a href="#">京东小金库</a></dd>
<dd><a href="#">京东基金理财</a></dd>
<dd><a href="#">京东保险理财</a></dd>
<dd><a href="#">小白理财</a></dd>
<dd><a href="#">智投理财</a></dd>
<dd><a href="#">乐猜</a></dd>
</dl>
</li>
<li>
<dl>
<dt>白条</dt>
<dd><a href="#">京东白条</a></dd>
<dd><a href="#">京东金条</a></dd>
<dd><a href="#">校园白条</a></dd>
<dd><a href="#">教育白条</a></dd>
<dd><a href="#">乡村白条</a></dd>
<dd><a href="#">京东金采</a></dd>
<dd><a href="#">京农贷</a></dd>
</dl>
</li>
<li>
<dl>
<dt>众筹</dt>
<dd><a href="#">产品众筹</a></dd>
<dd><a href="#">轻众筹</a></dd>
<dd><a href="#">产品众筹发起者常见问题</a></dd>
<dd><a href="#">产品众筹支持者常见问题</a></dd>
<dd><a href="#">产品众筹永久众筹常见问题</a></dd>
<dd><a href="#">京东众创常见问题</a></dd>
</dl>
</li>
<li>
<dl>
<dt>京东钱包</dt>
<dd><a href="#">京东钱包简介</a></dd>
<dd><a href="#">自动服务及常见问题</a></dd>
<dd><a href="#">购房盈</a></dd>
</dl>
</li>
</ul>
</nav>
<section class="content">
<p>京东金融 > 京东金融会员</p>
<ul>
<li>•<a href="#">什么是京东金融会员</a> </li>
<li>•<a href="#">会员签到规则</a> </li>
<li>•<a href="#">会员金币</a> </li>
<li>•<a href="#">小白信用</a> </li>
<li>•<a href="#">外部虚拟券</a> </li>
</ul>
</section>
</div>
</body>
<script>
// $(".menu-btn:first").css("border","1px red solid");
$(".menu-btn:first").hover(function () {
$(".topDown").show("slow");
},
function () {
$(".topDown").hide("fast");
}
);
$(".nav ul li").toggle(
function () {
var str_index = $(this).index();
var index = parseInt(str_index);
$(".nav ul li:eq(" + index + ")>dl dd").slideDown("slow");
},
function () {
var str_index = $(this).index();
var index = parseInt(str_index);
$(".nav ul li:eq(" + index + ")>dl dd").slideUp("slow");
}
);
// $(".nav ul li dl dt").click(
// function () {
// var str_index = $(this).index();
// var index = parseInt(str_index);
// $(".nav ul li:eq(" + index + ")>dl dd").toggle(
// function(){
// $(".nav ul li:eq(" + index + ")>dl dd").slideUp("slow");
// },
// function(){
// $(".nav ul li:eq(" + index + ")>dl dd").slideDown("slow");
// }
// );
// }
// );
</script>
</html>
css代码style.css
ul,li{padding: 0;margin: 0; list-style: none;}
.adver{margin: 0 auto; width: 700px; overflow: hidden; height: 454px; position: relative; background: url("../images/adver01.jpg");}
ul{position: absolute; bottom:10px; z-index: 100; width: 100%; text-align: center;}
ul li{display: inline-block; font-size: 10px; line-height: 20px; font-family: "���ź�"; margin: 0 1px; width: 20px; height: 20px; border-radius: 50%; background: #333333; text-align: center; color: #ffffff;}
.arrowLeft,.arrowRight{
position: absolute;
width: 30px;
background:rgba(0,0,0,0.2);
height: 50px;
line-height: 50px;
text-align: center;
top:200px;
z-index: 150;
font-family: "���ź�";
font-size: 28px;
font-weight: bold;
cursor: pointer;
display: none;
}
.arrowLeft{left: 10px;}
.arrowRight{right: 10px;}
li:nth-of-type(1){
background: orange;
}
扫一扫
3418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
