首页 > 编程语言 >视频直播系统源码,简单的移动端轮播图

视频直播系统源码,简单的移动端轮播图

时间:2022-10-19 16:24:41浏览次数:51  
标签:style tupian num 轮播 transition 直播 var 源码

视频直播系统源码,简单的移动端轮播图

1. 页面布局

1.1 页面框架

 

<body>
    <div class="box">
        <div class="tupian">
            <img src="4.webp" alt="">
            <img src="1.webp" alt="">
            <img src="2.webp" alt="">
            <img src="3.webp" alt="">
            <img src="4.webp" alt="">
            <img src="1.webp" alt="">
        </div>
        <ul>
            <li data-aa="0" class="aaa"></li>
            <li data-aa="1"></li>
            <li data-aa="2"></li>
            <li data-aa="3"></li>
        </ul>
    </div>
</body> 

1.2css样式

 

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box {
            position: relative;
            /* 在移动端如果不设置下面样式 可以拖动 */
            overflow: hidden;
        }
        .tupian img {
            float: left;
            width: 16.66%;
        }
        .tupian {
            width: 600%;
            margin-left:-393px;
        }
        ul {
            position: absolute;
            top: 300px;
            right: 20px;
        }
        ul li {
            float: left;
            margin-left: 30px;
           
            display: block;
            width: 20px;
            height: 10px;
        }
        .aaa {
            background-color: coral;
        }
    </style> 

 

2. 实现自动轮播

2.1 获取用到元素

 

    var box = document.querySelector('.box')
    var tupian = document.querySelector('.tupian')
    var ul = document.querySelector('ul')
 

 

2.2 通过css3的 transition 和 transform 属性实现动画效果

创建全局变量num作为轮播图的计数器

创建全局变量imgWidth 此变量就是整个box的宽度

创建一个定时器 时隔3秒触发一次 num++ 同时执行下面代码:

var translate = -num * imgWidth 整体tupian向左每次移动一张图片宽度

通过transition实现过渡效果

 

var timer = setInterval(function () {
        num++
        var translate = -num * imgWidth
        //设置元素的移动在2s内完成 给元素添加过度
        tupian.style.transition = 'all 1s'
        tupian.style.transform = 'TranslateX(' + translate + 'px)'
    }, 3000)
 

 

以上代码计时器开启后会不断切换宽度 当num>4后没有图片显示 当num<0后前方也没有图片

 

2.3 解决上面问题 实现重复轮播图片

通过给 tupian 添加 transitionend 事件 (当transition过渡效果完成后触发此事件)

在此事件中通过判断num==4时 将tupian.style.transform的值设为0 也就是回到第一张位置

同时将取消过度效果

此事件中添加判断

当num==4时也就是最后一张图片

当num<0时也就是第一张图片(后补那张和最后一张相同)

 

//过度执行结束后 会触发 transitionend 事件
    tupian.addEventListener('transitionend', function () {
        // console.log(num)
        if (num == 4) {
            num = 0
            //取消过度
            tupian.style.transition = 'none'
            tupian.style.transform = 'TranslateX(0px)'
        }else if(num<0){
            num=3
            var translatex=-num*imgWidth
            tupian.style.transition = 'none'
            tupian.style.transform = 'TranslateX('+translatex+'px)'
        }

 

 以上就是视频直播系统源码,简单的移动端轮播图的全部代码,更多内容请关注之后的文章

 

标签:style,tupian,num,轮播,transition,直播,var,源码
From: https://www.cnblogs.com/yunbaomengnan/p/16806691.html

相关文章

  • centos8(linux):通过源码编译安装imagemagick7(ImageMagick 7.1.0-51)
    一,ImageMagick的相关文档:1,官网:https://imagemagick.org/2,下载页https://imagemagick.org/script/download.php#linux如图:说明:刘宏缔的架构森林是一个......
  • vue源码分析-响应式系统工作原理
    上一章,我们讲到了Vue初始化做的一些操作,那么我们这一章来讲一个Vue核心概念响应式系统。我们先来看一下官方对深入响应式系统的解释:当你把一个普通的JavaScript对象传......
  • 音视频进阶教程-SEI直播补充增强信息实现
    1SEI功能简介在音视频流媒体应用中,除了可以流媒体通道推拉音视频内容外,还可以使用流SEI(SupplementalEnhancementInformation,媒体补充增强信息)通过流媒体通道将文本信......
  • CentOS/Ubuntu 源码编译安装升级 OpenSSH v8.9
    CentOS/Ubuntu源码编译安装升级OpenSSHv8.9原创 staugur SaintIC 2022-06-2912:22 发表于北京前言由于一次大规模安全演示扫描到一些Linux系统存在很多......
  • vue源码分析-动态组件
    前面花了两节的内容介绍了组件,从组件的原理讲到组件的应用,包括异步组件和函数式组件的实现和使用场景。众所周知,组件是贯穿整个Vue设计理念的东西,并且也是指导我们开发的......
  • 基于深度学习的自动车牌识别(详细步骤+源码)
    作者| Sanyam翻译 |OpenCV与AI深度学习导读本文将重点介绍ALPR的端到端实现。它将侧重于两个过程:车牌检测和检测到的车牌的OCR。(公众号:OpenCV与AI深度学习) 背景介......
  • 10.23尤大直播分享:vue生态进展和展望
    前言大家好,我是村长,欢迎关注我的公众号村长学前端。最近在与DevUI团队一起做直播,给大家分享VueDevUI开源组件库的建设,欢迎大家关注我们直播,多给项目star支持一下!今天参加了......
  • Transformer源码
    title:Transformer源码date:2022-10-0918:30:35mathjax:truetags:EncoderDecoderTransformerTransformer代码(源码Pytorch版本)从零解读(Pytorch版本)_哔哩......
  • 干货分享 | Shader 实现 PPT 转场效果(附源码)
    知乎上看到一位大佬用Shader实现了PPT里面的转场效果,转载大佬的文章,一起围观膜拜一下。原文分为上下两篇,详细阐述了每个效果的实现。上篇:https://zhuanlan.zhihu.com/p/......
  • postgresql13源码安装部署
    环境:Os:Centos7DB:13.81.下载安装介质下载地址:源码下载地址:https://www.postgresql.org/ftp/source/二进制下载地址(新版本的没有二进制下载,只能使用源码安装):http......