- 1Python算法题集_从前序与中序遍历序列构造二叉树_python 前序遍历
- 2【iOS免越狱】利用IOS自动化WebDriverAgent实现自动直播间自动输入_webdriveragent 滑动
- 3最小生成树超详细介绍_什么是最小生成树
- 4第十三届通信、电路与系统国际会议（ICCCAS 2024）即将召开！_icccas2024
- 5算法学习过程——欧拉（费马小定理、欧拉函数、欧拉定理、欧拉降幂、欧拉筛法）_1_欧拉算法
- 6基于Sim2Real的鸟瞰图语义分割方法
- 7MobaXterm-Chinese中文版本安装及简单使用_mobaxterm汉化
- 8用群辉NAS打造影视墙（Jellyfin篇）_nas jellyfin
- 9verilog中signed的使用_verilog 中signed类型
- 10使用JAR命令打包JAR文件使用Maven打包使用Gradle打包打包Spring Boot应用
html没学JS怎么写出轮播图效果？_自动轮播图html代码 不用js
赞
踩
其实要用轮播图效果还是要用到有关js的只是没必要学会，只是简单用一下的话，只需要要写两句js就行了，我给你准备好你复制上就好了
其实在菜鸟教程上就有，菜鸟教程上搜索：Bootstrap4 轮播 就能找到有关轮播图，可以搜索一下看看，但是那个上面所讲的，当你引用它所说的css时，会出现一定程度的乱码，因为它所引用的css内部有许多没有必要的指令，这些指令一生效，就会与你自己所写的指令发生碰撞，然后页面效果就是变得你无法控制了，我也是将它引用的代码展开来，将不必要的代码给删去，这样直接把剩下的给复制上去，就会完美啦。接下来也不多说啦，代码呈上，我已经将需要复制的给标蓝，黑色的是让你看清楚应该放在哪里，我标红的就是我所说的会出现乱码结果的css 我也把我改好的css放到最下面，我已经标橙色
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- 指示符 -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
</div>
<div class="carousel-item">
<img src="https://static.runoob.com/images/mix/img_nature_wide.jpg">
</div>
<div class="carousel-item">
<img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
</div>
</div>
<!-- 左右切换按钮 -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>
以下是轮播图所需要的css，将下面的代码单独写进一个css文件中，然后将上面的标红的css引用改成这个css引用就好了，像我这样
这个是将代码复制到轮播图.css中
这个是引用的
.carousel {
position: relative
}
.carousel-indicators {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 15;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
padding-left: 0;
margin-right: 15%;
margin-left: 15%;
list-style: none
}
.carousel-indicators li {
box-sizing: content-box;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 30px;
height: 3px;
margin-right: 3px;
margin-left: 3px;
text-indent: -999px;
cursor: pointer;
background-color: #fff;
background-clip: padding-box;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
opacity: .5;
transition: opacity .6s ease
}
@media (prefers-reduced-motion:reduce) {
.carousel-indicators li {
transition: none
}
}
.carousel-indicators .active {
opacity: 1
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden
}
.carousel-inner::after {
display: block;
clear: both;
content: ""
}
.carousel-item {
position: relative;
display: none;
float: left;
width: 100%;
margin-right: -100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: -webkit-transform .6s ease-in-out;
transition: transform .6s ease-in-out;
transition: transform .6s ease-in-out, -webkit-transform .6s ease-in-out
}
@media (prefers-reduced-motion:reduce) {
.carousel-item {
transition: none
}
}
.carousel-item-next,
.carousel-item-prev,
.carousel-item.active {
display: block
}
.active.carousel-item-right,
.carousel-item-next:not(.carousel-item-left) {
-webkit-transform: translateX(100%);
transform: translateX(100%)
}
.active.carousel-item-left,
.carousel-item-prev:not(.carousel-item-right) {
-webkit-transform: translateX(-100%);
transform: translateX(-100%)
}
.carousel-fade .carousel-item {
opacity: 0;
transition-property: opacity;
-webkit-transform: none;
transform: none
}
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right,
.carousel-fade .carousel-item.active {
z-index: 1;
opacity: 1
}
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
z-index: 0;
opacity: 0;
transition: 0s .6s opacity
}
@media (prefers-reduced-motion:reduce) {
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
transition: none
}
}
.carousel-control-next,
.carousel-control-prev {
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
width: 15%;
color: #fff;
text-align: center;
opacity: .5;
transition: opacity .15s ease
}
@media (prefers-reduced-motion:reduce) {
.carousel-control-next,
.carousel-control-prev {
transition: none
}
}
.carousel-control-next:focus,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-prev:hover {
color: #fff;
text-decoration: none;
outline: 0;
opacity: .9
}
.carousel-control-prev {
left: 0
}
.carousel-control-next {
right: 0
}
.carousel-control-next-icon,
.carousel-control-prev-icon {
display: inline-block;
width: 20px;
height: 20px;
background: no-repeat 50%/100% 100%
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e")
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e")
}
- 一、htmlHTML>
Home [详细] -->赞
踩
