bootstrap輪播

原創 4586558899 2018-09-11 06:02

<!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">&lsaquo;</a> <a class="carousel-control right"

href="#myCarousel" data-slide="next">&rsaquo;</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>


發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Bootstrap tab頁的動態ajax加載

babyhe 2019-02-23 00:30:39

Bootstrap筆記

baigungun 2019-02-23 00:04:16

djingo中使用bootstrap

matengbing 2019-02-22 22:36:37

Stucts應用引起的OutOfMemoryError

雪人涼 2019-02-22 22:17:49

代碼片段 navbar

hqtmit 2019-02-22 22:01:26

bootstrap插件之X-editable+django

zxcbvbbbbb 2019-02-22 21:47:49

bootstrap 工具提示框 彈出框 要事先初始化

啊磊 2019-02-22 21:08:47

bootstrap創建帶遮罩層的進度條

guyuexuan2012 2019-02-22 20:56:21

簡單的builder構造器示列

rgixb586 2019-02-22 20:45:25

Bootstrap 彈出框和警告框插件

菜鳥不菜麼 2019-02-22 20:21:41

bootstrap 表格

菜鳥不菜麼 2019-02-22 20:21:29

bootstrap按鈕組（一）

9秒學院 2019-02-22 18:54:18

bootstrap模態框hide遮罩層不隱藏解決辦法

dongfeng012 2019-02-22 18:36:52

11.29

張亞難 2019-02-23 00:03:32

jquery+html文字輪播

墨染情 2019-02-22 18:47:30