标签：轮播
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>汇金贷</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="./css/main.css"> -->
<script src="./JScripte/saved_resource"></script>
<script src="./JScripte/main.js"></script>
<script src="./JScripte/bootstrap.min.js"></script>
<script type="text/javascript">
$(function() {
$(‘.carousel‘).carousel({
interval : 2000
});
});
</script>
<style type="text/css">
#maindiv {
margin-left: 200px;
min-width: 1200px;
margin-top: 40px;
padding-top: 9px;
}
h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
font-size: 14px;
font-weight: 500
}
li {
list-style-type: none
}
.title {
color: #323232;
font-size: 18px;
line-height: 18px;
height: 18px;
padding-bottom: 10px;
width: 170px;
overflow: hidden
}
.categorys .cate-mt {
border-top: 1px solid #fff;
border-bottom: 1px solid #f6f6f6;
position: relative;
padding: 15px 0 24px;
margin: 0 20px
}
/* 弹出框的位置控制 */
.categorys .cate-content-list {
background: #fff;
position: absolute;
top: 0;
left: 209px;
width: 501px;
height: 580px;
display: none
}
.categorys {
position: relative;
width: 1200px;
margin: 0 auto;
z-index: 10
}
.categorys .cate-wrap {
position: absolute;
left: 0;
z-index: 6;
height: 580px;
width: 210px;
background: #fff;
border: 1px solid #A39F9F;
}
.categorys .cate-details {
height: 580px;
overflow: hidden
}
.categorys .cate-mt .angle-right {
width: 2px;
height: 60px;
left: 208px;
background-position: -296px -274px
}
.categorys .cate-mt .extra a {
color: red;
font-size: 14px;
line-height: 20px;
margin-right: 4px
}
</style>
</head>
<body>
<div
style="width: 1200px; height: 582px; margin-top: 50px; margin-left: 200px;">
<!-- 左侧选项卡 -->
<div style="width: 210px; height: 100%; float: left;">
<div class="categorys j_categorys">
<div class="cate-wrap">
<div class="cate-title-list">
<ul class="nav nav-pills nav-stacked">
<li class="cate-m fore1"><div>
<div class="cate-mt">
<h2 class="title">
<a class="text" href="#">理财</a> <a class="arrow" href="#"></a>
</h2>
<div class="extra">
<a href="#">小金库</a> <a href="#">票据</a> <a href="#">基金</a> <a
href="#">理财险</a>
</div>
<span class="angle"></span>
</div>
</div></li>
<li class="cate-m fore2"><div>
<div class="cate-mt">
<h2 class="title">
<a class="text" href="#">众筹</a> <a class="arrow" " href="#"></a>
</h2>
<div class="extra">
<a href="#">智能</a> <a href="#">文化</a> <a href="#">生活</a> <a
href="#">公益</a>
</div>
<span class="angle"></span>
</div>
</div></li>
<li class="cate-m fore3"><div>
<div class="cate-mt">
<h2 class="title">
<a class="text" href="#">保险</a> <a class="arrow" href="#"></a>
</h2>
<div class="extra">
<a href="#">意外险</a> <a href="#">健康险</a> <a href="#">旅行险</a>
</div>
<span class="angle"></span>
</div>
</div></li>
<li class="cate-m fore4"><div>
<div class="cate-mt">
<h2 class="title">
<a class="text" href="#">消费金融</a> <a class="arrow" href="#"></a>
</h2>
<div class="extra">
<a href="#">白条</a> <a href="#">旅游白条</a> <a href="#">校园白条</a>
</div>
<span class="angle"></span>
</div>
</div></li>
<li class="cate-m fore5"><div>
<div class="cate-mt">
<h2 class="title">
<a class="text" href="#">消费金融</a> <a class="arrow" href="#"></a>
</h2>
<div class="extra">
<a href="#">白条</a> <a href="#">旅游白条</a> <a href="#">校园白条</a>
</div>
<span class="angle"></span>
</div>
</div></li>
<li class="cate-m fore6"><div>
<div class="cate-mt">
<div
style="height: 80px; width: 80px; margin-left: 30px; margin-bottom: 10px; background: url(‘./image/123456.png‘); background-size: 100% 100%;">
</div>
<div class="title">1000万现金人人有份</div>
</div></li>
</ul>
</div>
<div class="cate-content-list" style="display: none;">
<div class="cate-mc fore1" style="display: block;">
<div class="title">
<span class="text">理财</span> <span class="extra">赚钱 分秒必争</span>
<a href="#" class="more">更多<i></i></a>
</div>
<div class="goods-list">
<a href="#">小金库</a> <a href="#">票据理财</a> <a href="#">股票基金</a> <a
href="#">混合基金</a> <a href="#">债券基金</a> <a href="#">货币基金</a> <a
href="#">其他基金</a> <a href="#">保险理财</a>
</div>
<div class="goods-promotion ">
<a href="#"><img class="lazyload-img" width="510"
height="470" src="./image/54f56057N641764e6.png"></a>
</div>
<div class="goods-extra">
<div class="content"></div>
</div>
</div>
<div class="cate-mc fore2" style="display: none;">
<div class="title">
<span class="text">众筹</span> <span class="extra">好玩 就要抢先尝</span>
<a href="#" class="more">更多<i></i></a>
</div>
<div class="goods-list">
<a href="#">智能硬件</a> <a href="#">流行文化</a> <a href="#">生活美学</a> <a
href="#">公益</a> <a href="#">其他</a>
</div>
<div class="goods-promotion">
<a href="#"><img class="lazyload-img" width="510"
height="470" src="./image/54d8a505Nf4a9774b.png"></a>
</div>
<div class="goods-extra">
<div class="content"></div>
</div>
</div>
<div class="cate-mc fore3" style="display: none;">
<div class="title">
<span class="text">保险</span> <span class="extra">保障 未雨绸缪</span>
<a href="#" class="more">更多<i></i></a>
</div>
<div class="goods-list">
<a href="#">意外险</a> <a href="#">健康险</a> <a href="#">旅行险</a>
</div>
<div>
<a href="#"><img class="lazyload-img" width="510"
height="470" src="./image/54d82d6bNaddbeaaa.png"></a>
</div>
</div>
<div class="cate-mc fore4" style="display: none;">
<div class="title">
<span class="text">消费金融</span> <span class="extra">花钱
精打细算</span> <a href="http://baitiao.jd.com/activity/third"
class="more">更多<i></i></a>
</div>
<div class="goods-list">
<a href="#">白条</a> <a href="#">旅游白条</a> <a href="#">校园白条</a>
</div>
<div>
<a href="#"><img class="lazyload-img" width="510"
height="470" src="./image/54d82f60N09df5b6b.png"></a>
</div>
<div class="goods-extra">
<div class="content"></div>
</div>
</div>
<div class="cate-mc fore5" style="display: none;">
<div class="title">
<span class="text">投融资</span> <span class="extra">贷动未来</span>
</div>
<div class="goods-list">
<a href="#">京小贷</a> <a href="#">京保贝</a>
</div>
<div>
<a href="#"><img class="lazyload-img" width="510"
height="470" src="./image/5502bbcaN09001202.png"></a>
</div>
</div>
<div class="cate-mc fore6" style="display: none;">
<div>
<a href="#"><img class="lazyload-img"
src="./image/5502983fNdbdd9744.png"></a>
</div>
</div>
</div>
<div class="cate-tabs-list">
<ul>
<li class="fore1 curr"></li>
<li class="fore2"></li>
</ul>
</div>
</div>
</div>
</div>
<!-- 右侧轮播 -->
<div style="width: 80%; height: 100%; margin-left: 10px; float: left;">
<div style="float: left; width: 700px; height: 582px;"
class="carousel slide">
<div id="myCarousel" class="carousel slide" style="width: 700px;">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner" data-ride="carousel">
<div class="item active">
<img src="./image/5506300fNc63158f0.jpg" alt="First slide">
</div>
<div class="item">
<img src="./image/550671c9Nef8a4957.jpg" alt="Second slide">
</div>
<div class="item">
<img src="./image/54f93d70N17af0b2d.jpg" alt="Third slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹</a> <a class="carousel-control right"
href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<div
style="float: left; width: 200px; margin-left: 10px; height: 582px;"
myCarousel" class="carousel slide">
<div style="float: left; width: 270px; height: 582px;">
<!-- 上 -->
<div style="height: 250px;">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner" data-ride="carousel">
<div class="item active">
<img src="./image/5506300fNc63158f0.jpg" alt="First slide">
</div>
<div class="item">
<img src="./image/550671c9Nef8a4957.jpg" alt="Second slide">
</div>
<div class="item">
<img src="./image/54f93d70N17af0b2d.jpg" alt="Third slide">
</div>
</div>
</div>
</div>
<!-- 中 -->
<div style="height: 150px;">
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner" data-ride="carousel"
style="height: 140px;">
<div class="item active">
<img src="./image/5506300fNc63158f0.jpg" alt="First slide">
</div>
<div class="item">
<img src="./image/550671c9Nef8a4957.jpg" alt="Second slide">
</div>
<div class="item">
<img src="./image/54f93d70N17af0b2d.jpg" alt="Third slide">
</div>
</div>
</div>
</div>
<!-- 下 -->
<div style="height: 80px;">
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner" data-ride="carousel">
<div class="item active" style="height: 180px;">
<img src="./image/5506300fNc63158f0.jpg" alt="First slide">
</div>
<div class="item" style="height: 180px;">
<img src="./image/550671c9Nef8a4957.jpg" alt="Second slide">
</div>
<div class="item" style="height: 180px;">
<img src="./image/54f93d70N17af0b2d.jpg" alt="Third slide">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
标签：轮播
原文地址：http://6664553.blog.51cto.com/6654553/1621823
