【发布时间】：2020-03-14 17:39:28
【问题描述】：
好吧，我要做的是在悬停其容器或图像时带有重叠标题的幻灯片放映。图像必须完全适合容器框，因此它不会显示滚动条并且边框半径是正确的。我能够做到，但是有一个错误。第一次加载页面时它是正常的，但是会发生闪烁并且出现滚动条，或者相反（首先滚动条存在然后不存在）。有没有办法解决这个问题？
我使用 Chrome 和 Firefox 进行了测试，两者都呈现出相同的错误行为。
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slide");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
} else if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}@charset "UTF-8";
* {
margin: 0px;
padding: 0px;
}
#header {
background-color: #202020;
height: 120px;
overflow: auto;
}
body {
background-color: #f5f5f5;
}
.navbar li {
display: inline;
margin-left: 50px;
}
.navbar {
font-family: "Roboto Thin";
font-size: 20pt;
color: white;
list-style-type: none;
padding-top: 48px;
margin-left: 400px;
}
#login {
font-size: 14pt;
color: white;
float: right;
padding-top: 57px;
padding-right: 35px;
}
#login li {
display: inline;
margin-left: 10px;
}
.titulo {
font-family: "Roboto Light";
font-size: 45pt;
}
img#mds-modern {
float: left;
padding-top: 15px;
height: 100px;
}
img#mds-logo {
float: left;
height: 120px;
}
div.body {
padding-top: 20px;
}
.carousel-container {
max-width: 773px;
max-height: 509px;
border-radius: 10px;
position: relative;
margin: auto;
overflow: auto;
}
.slide {
display: none;
}
.slide img {
width: 100%;
height: 100%;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.caption {
height: 50px;
color: rgba(242, 242, 242, 0);
font-size: 20pt;
font-family: "Roboto Thin";
padding-top: 12.5px;
position: absolute;
bottom: 0px;
width: 100%;
text-align: center;
}
.carousel-container:hover .caption {
background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(25, 25, 25, 0.8));
color: #f2f2f2;
transition: background 2s;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
.row::after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 33.33%;
}
@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}<!DOCTYPE html>
<html>
<head lang="pt-br">
<meta charset="utf-8">
<title>Malucos do Sealp</title>
<link type="text/css" rel="stylesheet" href="estilos.css">
<script language="javascript" src="script.js"></script>
</head>
<body>
<div class="header-container">
<nav>
<header id="header">
<img id="mds-logo" src="MDS.png" alt="Escudo MDS">
<img id="mds-modern" src="MDS Modern Logo.png" alt="MDS Logo Moderna">
<ul class="navbar" id="login">
<li>Login</li>
<li>|</li>
<li>Seja Um Maluco</li>
</ul>
<ul class="navbar">
<li>Notícias</li>
<li>Loja</li>
<li>História</li>
<li>Jogadores</li>
</ul>
</header>
</nav>
</div>
<div class="body">
<div class="carousel-container">
<div class="slide fade">
<img src="MDS Anúncio.jpg" alt="Anúncio de novos uniformes">
<div class="caption">
<p>Novo uniforme para a temporada</p>
</div>
</div>
<div class="slide fade">
<img src="MDS Produto.jpg" alt="Produto uniforme">
<div class="caption">
<p>Compre já seu uniforme</p>
</div>
</div>
<div class="slide fade">
<img src="MDS Reborn.jpg" alt="Reborn">
<div class="caption">
<p>MDS REBORN</p>
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div class="row">
<div class="column">
</div>
</div>
</div>
<!-- The dots -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<script>
showSlides(0)
</script>
</div>
</body>
</html>【问题讨论】：
标签： javascript html css containers