视频直播系统源码，简单的移动端轮播图
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)'
}
以上就是视频直播系统源码，简单的移动端轮播图的全部代码，更多内容请关注之后的文章
原文地址：http://www.cnblogs.com/yunbaomengnan/p/16806691.html
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，请务用于商业用途!
3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！
8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载
声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性
