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

在这里插入图片描述

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

        • 1. 我的实现效果
        • 2. 前端界面设置
        • 3. 图片动画效果实现
        • 4. 总的代码

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点说到的那篇博客，真的挺基础的那种。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/36099.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

spring boot项目如何自定义参数校验规则

spring boot项目如何自定义参数校验规则

spring boot项目对参数进行校验时&#xff0c;比如非空校验&#xff0c;可以直接用validation包里面自带的注解。但是对于一些复杂的参数校验&#xff0c;自带的校验规则无法满足要求&#xff0c;此时需要我们自定义参数校验规则。自定义校验规则和自带的规则实现方式一样&…
阅读更多...
LangChain大型语言模型(LLM)应用开发(三)：Chains

LangChain大型语言模型(LLM)应用开发(三)：Chains

LangChain是一个基于大语言模型&#xff08;如ChatGPT&#xff09;用于构建端到端语言模型应用的 Python 框架。它提供了一套工具、组件和接口&#xff0c;可简化创建由大型语言模型 (LLM) 和聊天模型提供支持的应用程序的过程。LangChain 可以轻松管理与语言模型的交互&#x…
阅读更多...
IP 协议(网络层协议)

IP 协议(网络层协议)

IP协议 IP 协议作用地址管理动态分配 IP 地址NAT 机制IPv6IP 地址的组成 路由选择 IP 协议作用 主要有两点 : 地址管理 为每个上网的设备分配一个唯一地址. 路由选择 两台主机间的信息交互, 具体走哪条线路. 地址管理 先来看看 IP协议 报文格式 : IP 协议最主要就是 32 位的…
阅读更多...
香橙派4和树莓派4B构建K8S集群实践之七： Jenkins

香橙派4和树莓派4B构建K8S集群实践之七： Jenkins

目录 1. 说明 2. 步骤 2.1 准备工作 2.2 安装 2.2.1 用jenkins原站for k8s的安装仓方法安装 2.2.2 Helm 安装 3. 相关命令 4. 遇到的问题 5. 参考 1. 说明 在k8s上部署jenkins&#xff0c;并用 jenkins.k8s-t2.com访问在namespace为devops下安装在指定节点k8s-master-…
阅读更多...
任天堂 Switch 六月销量破纪录，极有可能成为日本市场销量冠军

任天堂 Switch 六月销量破纪录，极有可能成为日本市场销量冠军

任天堂于2017年发布的游戏机Switch已进入第六个年头。虽然该游戏机在硬件性能和品控方面受到一些评价不佳&#xff0c;但销售数据表明绝大多数玩家仍然乐意购买Switch游戏机。 根据日本经济新闻报道&#xff0c;今年6月Switch在日本销售了380,000台机器&#xff0c;同比增长68%…
阅读更多...
【KingbaseES】如何查看表结构

【KingbaseES】如何查看表结构

SELECT column_name, data_type, is_nullable, column_default FROM information_schema.columns WHERE table_name test_szie;
阅读更多...
ArcGIS、ENVI、InVEST、FRAGSTATS等多技术融合提升环境、生态、水文、农业、大气等领域数据分析

ArcGIS、ENVI、InVEST、FRAGSTATS等多技术融合提升环境、生态、水文、农业、大气等领域数据分析

查看原文>>> ArcGIS、ENVI、InVEST、FRAGSTATS等多技术融合提升环境、生态、水文、农业、大气等领域数据分析 【内容简述】&#xff1a; 注&#xff1a;请提前自行配置上课环境 【其它相关推荐】&#xff1a; GEE遥感云大数据林业应用典型案例实践及GPT模型应用 基…
阅读更多...
TCP的十个核心机制

TCP的十个核心机制

目录 前言一 到 三四. 滑动窗口五. 流量控制六. 拥塞控制七. 延时应答八. 捎带应答九. 面向字节流十. 异常处理总结 前言 TCP协议是传输层的重点协议, 负责将数据从发送端传输到接收端. TCP协议是传输控制协议, 顾名思义也就是对数据的传输进行控制的协议. TCP 协议有很多, 我…
阅读更多...
云端安全由繁到简，亚马逊云科技护航业务创新新局面

云端安全由繁到简，亚马逊云科技护航业务创新新局面

数字化愿景与现实存在的差距困扰着诸多企业&#xff0c;但造成这种差距的一个重要因素却一直被很多管理者所忽视&#xff0c;那就是企业未能建立应有的数字安全与合规体系。应用迭代的速度加快、数据快速膨胀、企业云原生道路上遭遇的种种困境&#xff0c;与数字安全部门有限的…
阅读更多...
Kubernetes的Pod中进行容器初始化

Kubernetes的Pod中进行容器初始化

Kubernetes的Pod中进行容器初始化 在很多应用场景中&#xff0c;应用在启动之前都需要进行如下初始化操作&#xff1a; 等待其他关联组件正确运行(例如数据库或某个后台服务)。 基于环境变量或配置模板生成配置文件。 从远程数据库获取本地所需配置&#xff0c;或者将自身注…
阅读更多...
【网络技术】计算机网络介绍

【网络技术】计算机网络介绍

写在前面 计算机网络是指将多台计算机连接起来&#xff0c;使它们能够相互通信和共享资源的系统。 它是现代计算机科学中的重要分支之一&#xff0c;为全球范围内的信息交流和数据传输提供了基础。 本文将介绍计算机网络的基础概念、体系结构、协议、常见问题等的知识。 一、基…
阅读更多...
[LeetCode]2178.拆分成最多数目的偶整数之和

[LeetCode]2178.拆分成最多数目的偶整数之和

2178.拆分成最多数目的偶整数之和 题目 思路 首先&#xff0c;奇数是不可拆分成多数目的偶整数&#xff0c;这种情况返回一个空数组。 累加2以组合一个最多不同数目偶整数&#xff0c;当拆分的最后一个偶整数&#xff0c;总和大于原数时&#xff0c;将差值累加到最后一位偶整…
阅读更多...
flutter RepaintBoundary 截屏图片下载，保存图片不清晰的问题

flutter RepaintBoundary 截屏图片下载，保存图片不清晰的问题

flutter RepaintBoundary 截屏图片下载&#xff0c;保存图片不清晰的问题 前言一、什么是RepaintBoundary二、RepaintBoundary 能干什么三、RepaintBoundary 保存图片模糊的问题四、RepaintBoundary 使用小demo总结 前言 最近工作中&#xff0c;突然遇到截屏保存图片的问题&…
阅读更多...
超细，设计一个“完美“的测试用例，用户登录模块实例...

超细，设计一个“完美“的测试用例，用户登录模块实例...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 好的测试用例一定…
阅读更多...
Vite按需引入自定义组件unplugin-vue-components

Vite按需引入自定义组件unplugin-vue-components

1.安装插件 npm i unplugin-vue-components -D 2.vite.config.ts文件加如下代码 plugins: [vue({reactivityTransform: true}),Components({extensions: [vue, md],include: [/\.vue$/, /\.vue\?vue/, /\.md$/],dts: src/components.d.ts,deep: true, // 搜索子目录dirs: [s…
阅读更多...
RabbitMQ-基础学习

RabbitMQ-基础学习

在虚拟机上安装Erlang的GCC环境&#xff0c;装erlong&#xff0c;然后安装rabbitmq 参考&#xff1a;安装说明链接 安装web端面板 创建交换机 先学习一下工作模式&#xff08;详细介绍可见官网&#xff09; 上代码 1.Hello Word模式 写在测试类中&#xff1a; Providucer T…
阅读更多...
Angular 调试工具（Augury）

Angular 调试工具（Augury）

目录 1、简介 2、检验代码 3、Angury 本地构建和安装 3.1 添加到Chrome 浏览器&#xff1a; 3.2 添加到Firefox浏览器 4、项目中对应的Npm脚本 5、Augury 三大主要功能 5.1 组件树&#xff08;Component Tree&#xff09; 5.1.1 Component Tree 5.2 路由树&#xff0…
阅读更多...
【DBA课程-笔记】MongoDB入门到云上开发

【DBA课程-笔记】MongoDB入门到云上开发

课程目的&#xff1a;成为专业MongoDB的DBA nosql第一&#xff1a;MongoDB 一、讲师&#xff1a; 二、课程目录 第1章&#xff1a;MongoDB数据库入门 第2章&#xff1a;MongoDB数据数据查询与分析 第3章&#xff1a;MongoDB数据库核心知识 第4章&#xff1a;MongoDB数据库…
阅读更多...
基于单片机智能加湿器 水位防干烧加湿器的设计与实现

基于单片机智能加湿器 水位防干烧加湿器的设计与实现

功能介绍 以51/STM32单片机作为主控系统&#xff1b;LCD1602液晶显示当前温湿度&#xff0c;当前模式&#xff0c;湿度下限;按键设置湿度下限&#xff0c;当湿度低于下限时开启加湿器;水位传感器检查加湿器是否有水&#xff0c;如果没有水到话加湿器不进行工作&#xff0c;蜂鸣…
阅读更多...
做题遇见的PHP函数汇总

做题遇见的PHP函数汇总

mb_substr函数 mb_substr() 函数返回字符串的一部分&#xff0c;之前学过 substr() 函数&#xff0c;它只针对英文字符&#xff0c;如果要分割的中文文字则需要使用 mb_substr() 语法&#xff1a; mb_substr ( $str ,$start [, $length NULL [, $encoding mb_encoding() ]] …
阅读更多...
最新文章

Copyright @ 2022~2023