前端:运用html+css+js实现虎牙直播上的轮播图效果

编程语言 2023-08-06 15:49:06 阅读次数: 0

在这里插入图片描述

前端:运用html+css+js实现虎牙直播上的轮播图效果

1. 我的实现效果

近段时间看虎牙直播看的多，发现这上面的一个轮播图效果不错，如是打算运用纯html+css+js实现一下上述那个运行效果，虽然最终效果和上述的还有所差异，但是小编自己觉得还不错，当然，读者想理解更多关于轮播图的实现，可以去看看小编的这篇博客(比较基础的那种)，前端：HTML+CSS+JavaScript实现轮播图，小编实现的效果如下(最少需要四张图片)：

前端:运用html+css+js实现虎牙直播上的轮播图效果

2. 前端界面设置

主要为了演示轮播图效果，为此效果部分处于水平居中位置请添加图片描述
其中用到了绝对定位、相对定位等，画面中图片处在不同的位置上，是通过设置对应标签元素的left值属性来实现的。
请添加图片描述
为了让读者更加了解轮播图上的相关布局，小编特意画出图片布局，如下：
请添加图片描述
关于上述图片中图片大小，小编经过计算得出。

3. 图片动画效果实现

使用了两个定时器，内定时器用于实现图片动画，外定时器用于实现图片动画之间的暂停时间，也就是相当于休眠功能，因为小编在js代码中l每个图片的相关left值变化较小，所以在实际使用中会存在一定bug，所以读者需要使用的话，可以在我的基础上改进改进left值，当然其中一些数据也需要做相应的变化(需要经过计算得出)。请添加图片描述
小编的js代码中可能存在一定的重复代码，没有进行简化，所以总的代码有200多行，简化之后应该可以做到只有100多行吧！请添加图片描述
上述图片中是内定时器每隔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
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022