加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 综合聚焦 > 服务器 > 安全 > 正文

bootstrap轮播

发布时间：2020-12-17 21:05:24 所属栏目：安全 来源：网络整理
导读：!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/save

<!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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同