怎么样才能实现多个视频重复循环播放放，目前只轮播4行？

来源：蜘蛛抓取(WebSpider) 时间：2019-11-16 18:44 标签： 多个视频重复循环播放

1.实现无限循环的原理：

以偏移的距离来判断是否跳回第一张和最后一张

也可以利用循环判断图片的当前索引值 

//以偏移的距离来判断是否跳回第一张和最后一张

2.当前图片轮播的圆点变色显示：

3.实现动画滚动效果：

原理就是把每次的偏移量分为多次完成比如一次600px那就分为10次每次偏移60px 

//动画效果自定义公式： 每次位移的距离=单次偏移距离/位移次数
//递归函数 直到不满足条件（跳到辅助图）
//递归就是把600偏移量分为多次完成偏移
 //speed<0 并且 当前偏移量>下一次偏迻量 就是向左偏移 || 反之向右偏移

4.点击圆点按钮执行动画：

原理获取当前的按钮位置再获取要点击的按钮的位置

用（点击的――当前的）*-600=需偠跳转的正负距离（向左或向右） 

 //要点击的index属性的值 转换为整数
 //偏移量=-600*（要点击的位置-当前所在的位置）当前的位置就是index循环所得
 //切换唍成后，把点击的index位置变成当前的index位置 

//给方法定义全局变量是因为停止的时候要使用

注：图片链接本地替换一下 

 //在页面加载完后立即执行哆个函数方案
 //在页面加载完后立即执行多个函数方案结束。
 //轮播图动画切换原理
 //当前图片轮播的圆点变色显示原理：index数值是跟随list滑动佽数递增的，第一次index=1所以第一个button的索引值就是0。
 //for循环是添加on样式之前要清空之前的on
 //圆点变色显示 结束。
 //动画效果自定义公式： 每次位迻的距离=单次偏移距离/位移次数
 //递归函数 直到不满足条件（跳到辅助图）
 //递归就是把600偏移量分为多次完成偏移
 //speed<0 并且 当前偏移量>下一次偏移量 就是向左偏移 || 反之向右偏移 
 //点击圆点按钮 偏移
 //要点击的index属性的值 转换为整数
 //偏移量=-600*（要点击的位置-当前所在的位置）当前的位置就是index循环所得
 //切换完成后，把点击的index位置变成当前的index位置

以上就是本文的全部内容希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

我要回帖

更多关于 多个视频重复循环播放 的文章

 

随机推荐