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

1. 页面布局

1.1 页面框架

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

1.2css样式

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

2. 实现自动轮播

2.1 获取用到元素

    var box = document.querySelector('.box')<br>    var tupian = document.querySelector('.tupian')<br>    var ul = document.querySelector('ul')<br> 

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

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

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

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

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

通过transition实现过渡效果

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

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

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

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

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

同时将取消过度效果

此事件中添加判断

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

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

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

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