Front-end: use html+css+js para obter o efeito de imagem do carrossel na transmissão ao vivo do Huya

Language 2023-08-06 18:52:44 views: null

insira a descrição da imagem aqui

Front-end: use html+css+js para obter o efeito de imagem do carrossel na transmissão ao vivo do Huya

1. Meu efeito de realização

Recentemente, assisti a muitas transmissões ao vivo do Huya e descobri que uma imagem de carrossel acima funciona bem. Se eu planejo usar html+css+js puro para obter o efeito de operação mencionado acima, embora o efeito final ainda seja diferente de o de cima, é pequeno. Acho que não é ruim. Claro, se os leitores quiserem entender mais sobre a implementação do carrossel, podem acessar este blog do editor (o mais básico). A frente end: HTML+CSS+JavaScript para realizar o carrossel . O efeito obtido pelo editor é o seguinte (são necessárias pelo menos quatro imagens):

Front-end: use html+css+js para obter o efeito de imagem do carrossel na transmissão ao vivo do Huya

2. Configurações da interface de front-end

O objetivo principal é demonstrar o efeito da imagem do carrossel. Por esse motivo, a parte do efeito está na posição central horizontal. Adicione uma descrição da imagem
Posicionamento absoluto, posicionamento relativo etc. são usados. As imagens estão em posições diferentes na tela, o que é alcançado definindo o atributo de valor esquerdo do elemento de rótulo correspondente.
Adicione uma descrição da imagem
Para que os leitores saibam mais sobre o layout relevante no carrossel, o editor deliberadamente desenha o layout das fotos, da seguinte forma: O
Adicione uma descrição da imagem
tamanho das fotos nas fotos acima é calculado pelo editor.

3. Realização do efeito de animação de imagem

Dois timers são usados, o timer interno é usado para realizar a animação da imagem e o timer externo é usado para realizar o tempo de pausa entre as animações da imagem, que é equivalente à função de dormência, porque o editor usa o valor esquerdo relevante de cada imagem no código js A alteração é pequena, então haverá alguns bugs no uso real, portanto, se os leitores precisarem usá-lo, eles podem melhorar o valor esquerdo com base no meu. Claro, alguns dos dados também precisam ser alterados adequadamente (precisam ser calculados). Adicione uma descrição da imagem
Pode haver algum código repetitivo no código js do editor, que não foi simplificado, portanto o código total tem mais de 200 linhas, após a simplificação, deve ser capaz de atingir apenas mais de 100 linhas! Adicione uma descrição da imagem
Na imagem acima, o timer interno executa a operação a cada 1ms, e a alteração máxima dos pixels relevantes não excede 2px, então o efeito é um pouco lento.

4. Código geral

  1. código de front-end
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <div class="main">
        <ul>
            <!-- li标签的个数至少为4个 -->
            <li class="pre-ele">
                <img src="1.jpg" alt="">
            </li>
            <li class="cur-ele">
                <img src="2.jpg" alt="">
            </li>
            <li class="next-ele">
                <img src="3.jpg" alt="">
            </li>
            <li class="other-ele">
                <img src="0.jpg" alt="">
            </li>
        </ul>
        <div class="left">
            <
        </div>
        <div class="right">
            >
        </div>
    </div>
</body>

<script src="main.js"></script>
</html>
  1. código de estilo
*{
    
    
    margin: 0;
    padding: 0;
}

ul{
    
    
    list-style: none;
}

.main{
    
    
    height: 270px;
    width: 800px;
    margin: 20px auto;
    position: relative;
}

.main ul{
    
    
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.main ul li{
    
    
    position: absolute;
}

.main ul li >img{
    
    
    display: block;
    width: 100%;
    height: 100%;
}

.main >div{
    
    
    position: absolute;
    top: 0;
    font-size: 18px;
    line-height: 270px;
    display: none;
    cursor: pointer;
    z-index: 3;
}

.main >div:hover{
    
    
    background: rgba(255, 255, 255, 0.3);
}

.left{
    
    
    left: 0;
}

.right{
    
    
    right: 0;
}
  1. código js


const eles = document.querySelectorAll('.main ul >li');
// 所以的li标签元素

const li_width = 300,li_height = 230;

// 初始化
for(let i=0;i<eles.length;i++){
    
    
    let ele = eles[i];
    
    ele.style.left = 200 + (i - 1)*300 +'px';
    ele.style.top = 20 + 'px';
    ele.style.width = li_width + 'px';
    ele.style.height = li_height + 'px';
    ele.style.opacity = 0.4;
    ele.style.zIndex = 1;
    if(i == 0){
    
    
        ele.style.left = 0;    
    }

    if(ele.className == 'cur-ele'){
    
    
        ele.style.left = 237 + 'px';
        ele.style.top = 10 + 'px';
        ele.style.width = 326 + 'px';
        ele.style.height = 250 + 'px';
        ele.style.opacity = 1;
        ele.style.zIndex = 2;
    }
    
}


var timer,timer2;
// 两个定时器

timer = setInterval(fun1,5000);
// 外部定时器
function fun1(){
    
    
    timer2 = setInterval(fun2,1);
}
// 向左移动
function fun2(){
    
    
    for(let i=0;i<eles.length;i++){
    
    
        ele = eles[i];
        let li_w = parseFloat(ele.style.width);
        let li_h = parseFloat(ele.style.height);
        let li_l = parseFloat(ele.style.left);
        let li_t = parseFloat(ele.style.top);

        if(ele.className == 'cur-ele'){
    
    
            li_l -= 1;
            li_t += 0.042;
            li_w -= 0.109;
            li_h -= 0.084;
        }else if(ele.className == 'next-ele'){
    
    
            li_l -= 1.109;
            li_t -= 0.042;
            li_w += 0.109;
            li_h += 0.084;
        }else{
    
    
            li_l -= 1.26;
        }

        if (ele.className == 'cur-ele' && li_l <= 0) {
    
    
            fun3();
            clearInterval(timer2);
        }
        
        ele.style.left = li_l + 'px';
        ele.style.top = li_t + 'px';
        ele.style.width = li_w + 'px';
        ele.style.height = li_h + 'px';

    }
}

function fun3(){
    
    
    let index = -1;
    for(let i=0;i<eles.length;i++){
    
    
        let ele = eles[i];
        let li_l = parseFloat(ele.style.left);

        ele.style.top = 20 + 'px';
        ele.style.width = li_width + 'px';
        ele.style.height = li_height + 'px';

        // pre-ele
        if(li_l < 0){
    
    
            ele.style.left = 800 + 'px';
            ele.className = 'other-ele';
        }else if(ele.className == 'cur-ele'){
    
    
            ele.style.left = 0;
            ele.className = 'pre-ele';
            ele.style.opacity = 0.4;
            ele.style.zIndex = 1;
        }else if(ele.className == 'next-ele'){
    
    
            ele.className = 'cur-ele';
            index = (i+1) % 4;
            ele.style.opacity = 1;
            ele.style.top = 10 + 'px';
            ele.style.left = 237 + 'px';
            ele.style.height = 250 + 'px';
            ele.style.width = 326 + 'px';
            ele.style.zIndex = 2;
        }
    }

    if(index !=-1){
    
    
        eles[index].className = 'next-ele';
        ele.style.left = 500 + 'px';
    }
}

// 向右移动
function fun4(){
    
    
    for (let i = 0; i < eles.length; i++) {
    
    
        ele = eles[i];
        let li_w = parseFloat(ele.style.width);
        let li_h = parseFloat(ele.style.height);
        let li_l = parseFloat(ele.style.left);
        let li_t = parseFloat(ele.style.top);

        if (ele.className == 'cur-ele') {
    
    
            li_l += 1;
            li_t += 0.038;
            li_w -= 0.0988;
            li_h -= 0.076;
        } else if (ele.className == 'pre-ele') {
    
    
            li_l += 0.901;
            li_t -= 0.038;
            li_w += 0.0988;
            li_h += 0.076;
        } else {
    
    
            li_l += 1.14;
        }

        if (ele.className == 'cur-ele' && li_l >= 500) {
    
    
            fun5();
            clearInterval(timer2);
        }
     
        ele.style.left = li_l + 'px';
        ele.style.top = li_t + 'px';
        ele.style.width = li_w + 'px';
        ele.style.height = li_h + 'px';

    }
}


function fun5(){
    
    
    let index = -1;
    for (let i = 0; i < eles.length; i++) {
    
    
        let ele = eles[i];

        ele.style.top = 20 + 'px';
        ele.style.width = li_width + 'px';
        ele.style.height = li_height + 'px';

        // pre-ele
        if (ele.className == 'next-ele') {
    
    
            ele.style.left = -300 + 'px';
            ele.className = 'other-ele';
        } else if (ele.className == 'cur-ele') {
    
    
            ele.style.left = 500 + 'px';
            ele.className = 'next-ele';
            ele.style.opacity = 0.4;
            ele.style.zIndex = 1;
        } else if (ele.className == 'pre-ele') {
    
    
            ele.className = 'cur-ele';
            index = (i - 1 + 4) % 4;
            ele.style.opacity = 1;
            ele.style.top = 10 + 'px';
            ele.style.left = 237 + 'px';
            ele.style.height = 250 + 'px';
            ele.style.width = 326 + 'px';
            ele.style.zIndex = 2;
        }
    }

    if (index != -1) {
    
    
        eles[index].className = 'pre-ele';
        ele.style.left = 0;
    }
}

function start(){
    
    
    timer = setInterval(fun1, 5000);
}

function stop(){
    
    
    clearInterval(timer2);
    clearInterval(timer);
}

window.addEventListener('focus',()=>{
    
    
    start();
});


window.addEventListener('blur',()=>{
    
    
    stop();
})


const ele2s = document.querySelectorAll('.main >div');
const main = document.querySelector('.main');
// 鼠标进入轮播图区域，轮播图暂停
main.onmouseover = function(){
    
    
    stop();
    for (let e of ele2s) {
    
    
        e.style.display = 'block';
    }
}
// 鼠标离开轮播图区域，轮播图继续播放
main.onmouseout = function () {
    
    
    let other_ele = document.querySelector('.other-ele');
    other_ele.style.left = 800 + 'px';
    for (let e of ele2s) {
    
    
        e.style.display = 'none';
    }
    start();
}

const left = document.querySelector('.left');
const right = document.querySelector('.right');

left.onmouseover = ()=>{
    
    
    let other_ele = document.querySelector('.other-ele');
    other_ele.style.left = 800 + 'px';
}

left.onclick = ()=>{
    
    
    fun1();
}


right.onmouseover = ()=>{
    
    
    let other_ele = document.querySelector('.other-ele');
    other_ele.style.left = -300 + 'px';
}

right.onclick = () => {
    
    
    timer2 = setInterval(fun4,1);
}

Para os leitores que não entendem o código js, ​​podem ler o blog que mencionei no ponto 1, é bem básico.

Acho que você gosta

Origin blog.csdn.net/qq_45404396/article/details/131607490
Recomendado
Clasificación
Diario
Más
2024-05-30(0)
2024-05-29(0)
2024-05-28(0)
2024-05-27(0)
2024-05-26(0)
2024-05-25(0)
2024-05-24(11)
2024-05-23(35)
2024-05-22(9)
2024-05-21(34)

Code World

© 2018 codetd.com