Front end: use html+css+js to realize the carousel image effect on Huya live broadcast

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

insert image description here

Front end: use html+css+js to realize the carousel image effect on Huya live broadcast

1. My realization effect

Recently, I have watched a lot of Huya live broadcasts, and found that a carousel image above works well. If I plan to use pure html+css+js to achieve the above-mentioned operation effect, although the final effect is still different from the above-mentioned one, it is small. I think it’s not bad. Of course, if readers want to understand more about the implementation of the carousel, you can go to this blog of the editor (the more basic one). The front end: HTML+CSS+JavaScript to realize the carousel . The effect achieved by the editor is as follows (at least four pictures are required):

Front end: use html+css+js to realize the carousel image effect on Huya live broadcast

2. Front-end interface settings

The main purpose is to demonstrate the effect of the carousel image. For this reason, the effect part is in the horizontal center position. Please add a picture description
Absolute positioning, relative positioning, etc. are used. The pictures are in different positions in the screen, which is achieved by setting the left value attribute of the corresponding label element.
Please add a picture description
In order to let readers know more about the relevant layout on the carousel, the editor deliberately draws the layout of the pictures, as follows: The
Please add a picture description
size of the pictures in the above pictures is calculated by the editor.

3. Picture animation effect realization

Two timers are used, the inner timer is used to realize the picture animation, and the outer timer is used to realize the pause time between the picture animations, which is equivalent to the dormancy function, because the editor uses the relevant left value of each picture in the js code The change is small, so there will be some bugs in actual use, so if readers need to use it, they can improve the left value based on mine. Of course, some of the data also need to be changed accordingly (need to be calculated). Please add a picture description
There may be some repetitive code in the editor's js code, which has not been simplified, so the total code has more than 200 lines. After simplification, it should be able to achieve only more than 100 lines! Please add a picture description
In the above picture, the internal timer performs the operation every 1ms, and the maximum change of the relevant pixels does not exceed 2px, so the effect is a bit slow.

4. General code

  1. front-end code
<!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. style code
*{
    
    
    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 code


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);
}

For those readers who don’t understand the js code, you can read the blog I mentioned in point 1, it’s really basic.

Guess you like

Origin blog.csdn.net/qq_45404396/article/details/131607490
Recommended
Face Wall Intelligence releases the Eurux-8x22B open source large model - it can be called the "science champion"
Kaiyuan Daily | Google supports Hongmeng to take over; open source Rabbit R1; Android phones supported by Docker; Microsoft’s anxiety and ambition; Haier Electric shuts down the open platform
Ranking
Jianzhi offer interview questions 68-II. The nearest common ancestor of a binary tree (recursive)
jQuery Mobile development 1-UI components
Summary of Kotlin function knowledge
[ZZ] The Naked Truth About Anisotropic Filtering
Diagnosis: record a recovery of abnormal CRASH storage caused the database to be unable to be opened normally
Redis introduction and Linux installation Redis
Experiment 2 Introduction to switches
glances open source command-line system monitoring tools introduced
Use of selector
vue3 handwriting a carousel picture
Daily
More
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(36)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)

Code World

© 2018 codetd.com