Implementado um layout web simples que contém cinco caixas diferentes, cada uma com uma imagem de fundo diferente e algum espaçamento entre elas. Quando você passa o mouse sobre uma caixa, sua imagem de fundo escurece e o texto fica branco. As caixas e botões são colocados em um contêiner e a página inteira parece uma galeria.
<div class="contêiner">
<div id="slide">
<div class="item" style="background-image:url('./img/Zhang Ruonan01.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi01.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi02.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi06.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi04.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi07.jpg')"></div>
</div>
<div class="botões">
<div class="esquerda">
<Anterior</div>
<div class="center">Baixar papel de parede</div>
<div class="right">Próximo </div>
</div>
</div>
</div> * {
margem: 0;
preenchimento: 0;
dimensionamento de caixa: caixa de borda;
}
.contêiner {
largura: 100vw;
altura: 100vh;
posição: relativa;
estouro: oculto;
}
.item{
largura: 240px;
altura: 160px;
posição: absoluta;
superior: 50%;
esquerda: 0;
transformar: traduzirY(-50%);
raio da borda: 10px;
sombra da caixa: 0 30px 50px #505050;
tamanho do fundo: capa;
posição de fundo: centro;
transição: 1s;
}
.item:nésimo-filho(1),
.item:nésimo-filho(2) {
esquerda: 0;
topo: 0;
largura: 100%;
altura: 100%;
transformar: traduzirY(0);
sombra da caixa: nenhuma;
raio da borda: 0;
}
.item:nésimo-filho(3) {
esquerda: 70%;
}
.item:nésimo-filho(4) {
esquerda: calc(70% + 250px);
}
.item:nésimo-filho(5) {
esquerda: calc(70% + 500px);
}
.item:nésimo-filho(n+6) {
esquerda: calc(70% + 750px);
opacidade: 0;
}
.botões {
largura: 100%;
posição: absoluta;
inferior: 50px;
margem esquerda: -50px;
alinhamento de texto: centro;
exibição: flexível;
justificar-conteúdo: centro;
}
.botões div {
largura: 120px;
altura: 50px;
altura da linha: 50px;
alinhamento de texto: centro;
raio da borda: 5px;
margem: 0 25px;
transição: 0,5s;
cursor: ponteiro;
seleção de usuário: nenhum;
tamanho da fonte: 20px;
cor: #fff;
cor de fundo: rgba (0, 0, 0, 0,4);
sombra da caixa: 2px 2px 2px rgba(0, 0, 0, 0,2);
} const leftBtn = document.querySelector(".botões .esquerda")
const rightBtn = document.querySelector(".botões .right")
const slide=document.querySelector("#slide")
let openClick = true // Processamento de aceleração (para garantir que o processo de execução da animação, o botão não seja clicado repetidamente)
leftBtn.addEventListener("clique", () => {
if (openClick) {
openClick = false // Após acionar o clique, desative o botão const items = document.querySelectorAll(".item")
slide.prepend(itens[itens.comprimento - 1])
setTimeout(() => openClick = true, 1000) // 1s para abrir o botão novamente}
})
rightBtn.addEventListener("clique", () => {
if (openClick) {
openClick = falso
const itens = document.querySelectorAll(".item")
slide.appendChild(itens[0])
setTimeout(() => openClick = true, 1000)
}
}) * {
margem: 0;
preenchimento: 0;
dimensionamento de caixa: caixa de borda;
}Este código define o estilo CSS global, incluindo a configuração do modelo de caixa do elemento como border-box, ou seja, a largura e a altura do modelo de caixa incluem a borda e o preenchimento do elemento, em vez de apenas o conteúdo do elemento.
.contêiner {
largura: 100vw;
altura: 100vh;
posição: relativa;
estouro: oculto;
}Este código define o estilo CSS do contêiner, incluindo a configuração da largura e altura do contêiner como 100vw e 100vh, que são a largura e a altura da janela de visualização. Ao mesmo tempo, defina o posicionamento do contêiner para posicionamento relativo, ou seja, posicionamento relativo ao seu elemento pai. Por fim, defina a propriedade overflow do container como oculta, ou seja, os elementos que ultrapassarem o escopo do container não serão exibidos.
.item {
largura: 240px;
altura: 160px;
posição: absoluta;
topo: 50%;
esquerda: 0;
transformar: traduzirY(-50%);
raio da borda: 10px;
sombra da caixa: 0 30px 50px #505050;
tamanho do fundo: capa;
posição de fundo: centro;
transição: 1s;
}Este código define o estilo CSS da caixa, incluindo a configuração da largura e altura da caixa para 240px e 160px, que é o tamanho da caixa. Ao mesmo tempo, defina o posicionamento da caixa para posicionamento absoluto, ou seja, posicionamento relativo ao seu elemento pai. Finalmente, defina o raio da borda da caixa para 10px, que é o canto arredondado da caixa. O tamanho da imagem de fundo da caixa é a capa, que cobre toda a caixa. A imagem de fundo está centralizada. Por fim, defina o efeito de transição da caixa para 1 segundo, ou seja, o tempo do efeito de transição é de 1 segundo.
.item:nésimo-filho(1),
.item:nésimo-filho(2) {
esquerda: 0;
superior: 0;
largura: 100%;
altura: 100%;
transformar: traduzirY(0);
sombra da caixa: nenhuma;
raio da borda: 0;
}Este código define os estilos CSS para a primeira e a segunda caixas, incluindo a definição de suas posições como 0, o que significa que elas cobrem a parte superior do contêiner. Além disso, defina a altura para 100%, o que significa que cobrem toda a altura do contêiner. Por fim, defina suas propriedades de transformação como translateY(0), o que significa que elas não irão descer. Além disso, defina o raio da sombra e da borda como 0, ou seja, eles não têm sombra e borda.
.item:nésimo-filho(3) {
esquerda: 70%;
}Este código define o estilo CSS da terceira caixa, incluindo a configuração de sua posição em 70% do lado esquerdo do contêiner.
.item:nésimo-filho(4) {
esquerda: calc(70% + 250px);
}Este código define o estilo CSS da quarta caixa, incluindo a configuração de sua posição para 250px do lado direito da terceira caixa.
.item:nésimo-filho(5) {
esquerda: calc(70% + 500px);
}Este código define o estilo CSS da quinta caixa, incluindo a configuração de sua posição para 500px do lado direito da terceira caixa.
.item:nésimo-filho(n+6) {
esquerda: calc(70% + 750px);
opacidade: 0;
}Este código define os estilos CSS para todas as caixas, incluindo a configuração de sua posição para 750px à direita da terceira caixa. Além disso, defina sua opacidade como 0, ou seja, eles ficam invisíveis.
.botões {
largura: 100%;
posição: absoluta;
inferior: 50px;
margem esquerda: -50px;
alinhamento de texto: centro;
exibição: flexível;
justificar-conteúdo: centro;
}Este código serve para definir o estilo CSS do botão, incluindo definir a largura do botão para 100%, ou seja, o tamanho do botão é igual ao container. Ao mesmo tempo, defina a posição do botão para 50px da parte inferior do contêiner. Por fim, defina o alinhamento do botão para alinhamento central, o que significa que o botão será centralizado horizontalmente.
.botões div {
largura: 120px;
altura: 50px;
altura da linha: 50px;
alinhamento de texto: centro;
raio da borda: 5px;
margem: 0 25px;
transição: 0,5s;
cursor: ponteiro;
seleção de usuário: nenhum;
tamanho da fonte: 20px;
cor: #fff;
cor de fundo: rgba (0, 0, 0, 0,4);
sombra da caixa: 2px 2px 2px rgba(0, 0, 0, 0,2);
}Este código serve para definir o estilo CSS do botão, incluindo definir a largura do botão para 120px e a altura para 50px, que é o tamanho do botão. Ao mesmo tempo, defina a altura da linha do botão para 50px, que é a altura do botão. O alinhamento do texto do botão é centralizado, ou seja, o texto é centralizado horizontalmente. O raio da borda do botão é 5px, que são os cantos arredondados do botão. A margem do botão é de 0 25px, ou seja, a distância entre os lados esquerdo e direito do botão na direção horizontal é de 25px. O efeito de transição do botão é de 0,5 segundos, ou seja, o tempo do efeito de transição é de 0,5 segundos. O atributo cursor do botão é ponteiro, ou seja, quando o mouse passa sobre o botão, o formato do mouse mudará para o formato de uma mão. O atributo de seleção do usuário do botão é nenhum, ou seja, o usuário não pode selecionar o texto do botão. O tamanho da fonte do botão é 20px, que é o tamanho do texto do botão. A cor do texto do botão é branca, que é a cor do texto do botão. A cor de fundo do botão é rgba (0, 0, 0, 0,4), ou seja, a cor de fundo do botão é preta e a transparência é 0,4. A propriedade shadow do botão é 2px 2px 2px rgba(0, 0, 0, 0.2), ou seja, a sombra do botão é 2px 2px 2px preta e a transparência é 0,2.
Isso conclui este artigo sobre o código de amostra do carrossel panorâmico HTML + CSS Para obter mais conteúdo relacionado ao carrossel panorâmico HTML CSS, pesquise os artigos anteriores em downcodes.com ou continue navegando nos seguintes artigos relacionados. mais no futuro!