【HTML轮播图】
这次讲的是一个快捷设置轮播图，使用插件实现轮播图效果的方式。首先导航栏搜索bootstrap进入官网，版本选择v4，然后点击快速入门复制css文件和集成包的代码在head标签内部。复制完以上代码之后找到组件中的轮播选项，找到轮播代码设置的代码段，如图所示：完整框架和代码如下：<!DOCTYPE html><html lang="en"><head><met
·
这次讲的是一个快捷设置轮播图，使用插件实现轮播图效果的方式。
首先导航栏搜索bootstrap进入官网，版本选择v4，然后点击快速入门复制css文件和集成包的代码在head标签内部。
复制完以上代码之后找到组件中的轮播选项，找到轮播代码设置的代码段，如图所示：
完整框架和代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
</head>
<style>
#carouselExampleIndicators {
width: 1000px;
height: 900px;
float: left;
position: absolute;
left: 337px;
top: 130px;
}
.gongjvlan {
width: 1500px;
height: 30px;
background: rgb(85, 82, 82);
border: 5px solid rgb(85, 82, 82);
line-height: 30px;
text-align: left;
font-size: 13px;
color: white;
}
.head {
width: 1500px;
height: 100px;
float: left;
background: white;
}
.head1 {
width: 30px;
height: 20px;
text-align: center;
position: absolute;
right: -1px;
top: 3px;
background: orange;
opacity: 0;
}
.head1:hover {
opacity: 1;
}
.zhuti {
width: 200px;
height: 700px;
background: rgb(161, 159, 159);
border: 10px solid rgb(161, 159, 159);
text-align: center;
font-size: 15px;
color: white;
float: left;
position: relative;
left: 110px;
}
.paimian {
width: 1500px;
height: 700px;
float: left;
}
.diyikuan {
width: 1500px;
height: 300px;
float: left;
position: absolute;
left: 119px;
top: 880px;
border: 1px solid white;
}
.yy {
width: 218px;
height: 200px;
float: left;
background-color: black;
}
.jj {
width: 1000px;
height: 200px;
opacity: 1;
position: absolute;
left: 337px;
top: 148px;
}
.jj1 {
width: 1000px;
height: 200px;
position: absolute;
left: 337px;
top: 148px;
background: white;
opacity: 0;
}
.jj1:hover {
opacity: 1;
}
.diyi {
width: 70px;
height: 70px;
float: left;
text-align: center;
font-size: 10px;
color: white;
}
.zhongxin {
width: 100px;
height: 500px;
float: right;
border: 5px solid rgb(233, 232, 232);
position: fixed;
right: 50px;
top: 200px;
text-align: end;
background: rgb(233, 232, 232);
}
.zhongxin1 {
width: 100px;
height: 500px;
float: right;
border: 5px solid rgb(233, 232, 232);
position: fixed;
right: 50px;
top: 200px;
text-align: end;
background: rgb(233, 232, 232);
opacity: 0;
color: orange;
}
.zhongxin1:hover {
opacity: 1;
}
.ww {
width: 100px;
height: 100px;
float: right;
text-align: center;
}
.xx {
width: 160px;
height: 70px;
float: left;
text-align: left;
color: white;
font-size: 20px;
position: relative;
left: 10px;
border: 1px solid rgb(161, 159, 159;
line-height: 70px;
}
.slide {
width: 800px;
height: 800px;
}
</style>
<body>
<div class="gongjvlan">
<span class="gongjvlan"> </span>
<span class="gongjvlan">小米商城</span>
<span class="gongjvlan">MIUI</span>
<span class="gongjvlan">ioT</span>
<span class="gongjvlan">云服务</span>
<span class="gongjvlan">天星数科</span>
<span class="gongjvlan">有品</span>
<span class="gongjvlan">小爱开放平台</span>
<span class="gongjvlan">企业团购</span>
<span class="gongjvlan">资质证明</span>
<span class="gongjvlan">小米商城</span>
<span class="gongjvlan">协议规则</span>
<span class="gongjvlan">下载APP</span>
<span class="gongjvlan">智能生活</span>
<span class="gongjvlan">Select location</span>
<span class="gongjvlan"> </span>
<span class="gongjvlan">登录</span>
<span class="gongjvlan">注册</span>
<span class="gongjvlan">消息通知</span>
<span class="gongjvlan">下载APP</span>
<img src="购物车.png" style="width: 30px; height: 20px;text-align: center;position: relative;top: 5px;">购物车
</div>
<div class="head">
<img src="小米.png" style="width: 50px; height: 50px;text-align: center;position: relative;left: 110px;top: 15px;">
<span class="head" style="position: absolute;left: 400px;line-height: 100px;">Xiaomi手机 Redmi红米 电视 笔记本 平板 家电 路由器 服务 社区</span>
<span><form action="" style="position: absolute;right: 100px;">
<input type="text" placeholder="请输入搜索内容"><img src="搜索.png" style="width: 30px;height: 20px;text-align: center;position: relative;right: -1px;top: 4px;"></span>
<span class="head1"><img src="搜索.png" style="width: 30px;height: 20px;text-align: center;position: relative;right: -1px;top: 4px;"></span>
</div>
<div class="paimian">
<div class="zhuti" style="display: inline-block;">
<div class="xx">手机<img src=" 箭头1.png " style="width: 25px; height: 25px;position:relative;left: 60px; "></div>
<div class="xx ">电视<img src="箭头1.png " style="width: 25px; height: 25px;position:relative;left: 60px; "></div>
<div class="xx">笔记本平板<img src=" 箭头1.png " style="width: 25px; height: 25px;position:relative;left: 1px; "></div>
<div class="xx">家电<img src=" 箭头1.png " style="width: 25px; height: 25px;position:relative;left: 60px; "></div>
<div class="xx ">出行穿戴<img src="箭头1.png " style="width: 25px; height: 25px;position:relative;left: 20px; "></div>
<div class="xx">智能路由器<img src=" 箭头1.png " style="width: 25px; height: 25px;position:relative;left: 1px; "></div>
<div class="xx ">电源配件<img src="箭头1.png " style="width: 25px; height: 25px;position:relative;left: 20px; "></div>
<div class="xx">健康儿童<img src=" 箭头1.png " style="width: 25px; height: 25px;position:relative;left: 20px; "></div>
<div class="xx">耳机音响<img src=" 箭头1.png " style="width: 25px; height: 25px;position:relative;left: 20px; "></div>
<div class="xx">生活箱包<img src=" 箭头1.png " style="width: 25px; height: 25px;position:relative;left: 20px; "></div>
</div>
<span class="slide" style="display: inline-block;">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="封面.jpg" class="d-block w-100" alt="..." style="width: 1000px;height:700px;">
</div>
<div class="carousel-item">
<img src="封面2.jpg" class="d-block w-100" alt="..."style="width: 1000px;height:700px;">
</div>
<div class="carousel-item">
<img src="封面3.jpg" class="d-block w-100" alt="..."style="width: 1000px;height:700px;">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
</span>
</div>
</div>
<div class="diyikuan ">
<div class="yy">
<div class="diyi ">
<img src="保障.png " style="width: 50px; height: 50px; ">
<div>保障服务</div>
</div>
<div class="diyi "><img src="团购.png " style="width: 50px; height: 50px; ">
<div>企业团购</div>
</div>
<div class="diyi "><img src="通道.png " style="width: 50px; height: 50px; ">
<div>F通道</div>
</div>
<div class="diyi "><img src="米粉卡.png " style="width: 50px; height: 50px; ">
<div>米粉卡</div>
</div>
<div class="diyi "><img src="以旧换新.png " style="width: 50px; height: 50px; ">
<div>以旧换新</div>
</div>
<div class="diyi "><img src="话费充值.png " style="width: 50px; height: 50px; ">
<div>话费充值</div>
</div>
</div>
<span><img src="1.jpg " style="width: 330px; height: 200px;text-align: center; ">
<img src="2.jpg " style="width: 330px; height: 200px;text-align: center; ">
<img src="3.jpeg " style="width: 330px; height: 200px;text-align: center; "></span>
</div>
<div class="zhongxin ">
<div class="ww "><img src="APP(1).png " style="width: 100px; height: 50px; ">手机APP
</div>
<div class="ww "><img src="个人中心(1).png " style="width: 100px; height: 50px; ">个人中心
</div>
<div class="ww "><img src="售后服务(1).png " style="width: 100px; height: 50px; ">售后服务
</div>
<div class="ww "><img src="人工服务.png " style="width: 100px; height: 50px; ">人工客服
</div>
<div class="ww "><img src="购物车.png " style="width: 100px; height: 50px; ">购物车
</div>
</div>
<div class="jj1">
<img src="手机1.png" style="width: 50px; height: 72px;text-align: center;position: absolute;left: 10px;top: 5px; ">
<img src="手机2.png" style="width: 50px; height: 72px;text-align: center;position: absolute;left: 200px;top: 5px; ">
<img src="手机3.png" style="width: 50px; height: 72px;text-align: center;position: absolute;left: 390px;top: 5px; ">
<img src="手机4.png" style="width: 50px; height: 72px;text-align: center;position: absolute;left: 580px;top: 5px; ">
<p>
<img src="手机5.png" style="width: 50px; height: 72px;text-align: center;position: absolute;left: 10px;top: 80px; ">
<img src="手机6.png" style="width: 50px; height: 72px;text-align: center;position: absolute;left: 200px;top: 80px; ">
<img src="手机7.png" style="width: 50px; height: 72px;text-align: center;position: absolute;left: 390px;top: 80px; ">
<img src="手机8.png" style="width: 50px; height: 72px;text-align: center;position: absolute;left: 580px;top: 80px; ">
</p>
</div>
<div class="zhongxin1">
<div class="ww "><img src="APP.png " style="width: 100px; height: 50px; ">手机APP
</div>
<div class="ww "><img src="个人中心.png " style="width: 100px; height: 50px; ">个人中心
</div>
<div class="ww "><img src="售后服务.png " style="width: 100px; height: 50px; ">售后服务
</div>
<div class="ww "><img src="人工服务(1).png " style="width: 100px; height: 50px; ">人工客服
</div>
<div class="ww "><img src="购物车(1).png " style="width: 100px; height: 50px; ">购物车
</div>
</div>
</body>
</html>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)