프런트 엔드: html+css+js를 사용하여 Huya 생방송에서 회전식 이미지 효과 실현

프로그래밍 언어 2023-08-06 18:52:37 독서 시간: null

여기에 이미지 설명 삽입

프런트 엔드: html+css+js를 사용하여 Huya 생방송에서 회전식 이미지 효과 실현

1. 나의 실현 효과

최근 Huya 라이브 방송을 많이 봤는데 위의 회전식 이미지가 잘 작동한다는 것을 알았습니다 순수한 html+css+js를 사용하여 위에서 언급한 작업 효과를 달성할 계획이라면 최종 효과는 여전히 위에서 언급한거 작긴한데 나쁘지않은거같음 물론 독자분들이 캐러셀 구현에 대해 좀 더 알고싶으시면 이 에디터 블로그(더 기초적인 블로그)로 가셔도 됩니다. end: HTML+CSS+JavaScript를 구현하여 캐러셀을 구현합니다 . 편집기에서 달성한 효과는 다음과 같습니다(최소 4개의 사진이 필요함).

프런트 엔드: html+css+js를 사용하여 Huya 생방송에서 회전식 이미지 효과 실현

2. 프런트엔드 인터페이스 설정

캐러셀 이미지의 효과를 시연하는 것이 주목적이기 때문에 효과 부분을 가로 중앙 위치에 두고 사진 설명을 추가해주세요
절대 위치 지정, 상대 위치 지정 등을 사용한다 . 해당 레이블 요소의 왼쪽 값 속성을 설정하여 달성됩니다.
사진 설명을 추가해주세요
독자에게 캐러셀의 관련 레이아웃에 대해 더 많이 알리기 위해 편집자는 의도적으로 다음과 같이 그림의 레이아웃을 그립니다.
사진 설명을 추가해주세요
위 그림의 그림 크기는 편집자가 계산합니다.

3. 그림 애니메이션 효과 구현

두 개의 타이머가 사용되는데 내부 타이머는 그림 애니메이션을 구현하는 데 사용되며 외부 타이머는 그림 애니메이션 사이의 일시 중지 시간을 구현하는 데 사용되며 이는 편집기가 각각의 관련 왼쪽 값을 사용하기 때문에 휴면 기능과 동일합니다. js 코드에 있는 그림 변화량이 적어서 실제 사용시 약간의 버그가 있을 수 있으니 독자들이 꼭 사용해야 한다면 제 것을 기준으로 왼쪽 값을 개선하면 됩니다. 그에 따라 (계산 필요). 사진 설명을 추가해주세요
단순화되지 않은 에디터의 js 코드에 일부 반복되는 코드가 있을 수 있으므로 전체 코드는 200줄 이상입니다. 사진 설명을 추가해주세요
위 그림에서 내부 타이머는 1ms 마다 동작을 하고 해당 픽셀의 최대 변화가 2px를 넘지 않아 효과가 다소 느립니다.

4. 일반 코드

  1. 프런트엔드 코드
<!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. 스타일 코드
*{
    
    
    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. 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);
}

js 코드를 이해하지 못하는 독자를 위해 1번에서 언급한 블로그를 읽을 수 있습니다. 정말 기본적인 내용입니다.

추천

출처blog.csdn.net/qq_45404396/article/details/131607490
추천
행
.netcoreapi 컨테이너와 컨테이너의 MySQL을 고정 표시기-구성
com.google.firebase.database.DatabaseException는 : 롱 타입 java.lang.String의 값을 변환하는 데 실패
국내 휴대전화 왕이 미국 통신사 시장 1위를 차지했지만 국내 휴대전화 4위는 아니다.
트랜잭션 격리 수준의 네 가지
오늘 chatgpt 시도
부하 분산
【FFMpeg】源码编译
우분투 sudo를 무료로 접착
자바 8 스트림 API - 어떤 상태 중간 동작을 보증 새로운 소스 수집합니까?
CF161BDiscounts
아카이브
기타
2020-04-08(1460)
2020-04-07(1517)
2020-04-06(1499)
2020-04-05(1440)
2020-04-04(1629)
2020-04-03(1644)
2020-04-02(1572)
2020-04-01(1665)
2020-03-31(1639)
2020-03-30(1334)

코드 세계

© 2018 codetd.com