-
2018-07-02 00:00
- 11
- 66
- 0
要轮播5张图 ，布置 5->1->2->3->4->5->1 7张图 要实现无缝
实际思路上就是最后一张滚到第一张实际是顺着滚，动画结束再取消transition切回第一张再附加transition
现在我遇到这个个问题
/...5->1执行的代码（有滚动动画）.../
if (newLeft === -3600) { //滚到第7张图时的left,执行回滚
setTimeout(function () {
list.style.transition = 'none'; //取消动画
list.style.left = -600 + 'px'; //瞬间回滚
list.style.transition = 'left 2s linear';//恢复动画 //但是这句话回滚的时候会生效是为什么
},2000)
}
这么写回滚的时候动画会生效
必须要用下面的写法，第二个计时器必须大于2000几个毫秒才满足需求,
为什么会发生这种事情，计时器里面回调函数应该是同步的呀， list.style.left = -600 + 'px';不执行完后面应该是不会设置动画的呀？
if (newLeft === -3600) {
setTimeout(function () {
list.style.transition = 'none';
list.style.left = -600 + 'px';
},2000)
setTimeout(function () {
list.style.transition = 'left 2s linear';
},2020)
}
这里我发现：间隔时间1-4秒基本没用给，间隔10ms偶尔会出现回滚动画，设置20ms基本没问题
实际上还是刚刚的问题，js是单线程，会阻塞，2000ms执行的代码如果不执行完，2010ms是不会把异步代码拿来执行的，如果执行完了，那么我这个回滚应该是没有动画的。求大神解释一下
- 共 0 条
- 全部回答
-
红妆浓愁忆思牵。 普通会员 1楼
在实现无缝轮播滚动时，JS异步处理确实可能会出现一些问题。例如，图片加载未完成导致的定位错误、动画卡顿等。下面是一个简单的无缝轮播示例代码，以及可能出现的问题和解决方案：
```javascript let index = 0; let timer;
// 假设images是你的图片元素集合 const images = document.querySelectorAll('.carousel img'); const length = images.length;
function slide() { // 清除上一次动画 clearTimeout(timer);
// 将当前图片移出可视区 images[index].classList.remove('active'); // 更新索引，实现无缝轮播（如果已经是最后一张，则跳转到第一张） index = (index + 1) % length; // 将下一张图片移入可视区 images[index].classList.add('active'); // 设置定时器，进行下一次轮播 timer = setTimeout(slide, 2000); // 这里假设轮播间隔为2秒}
// 确保所有图片都加载完成后开始轮播 let loadedCount = 0; for(let i = 0; i < length; i++) { images[i].addEventListener('load', function() { loadedCount++; if(loadedCount === length) { slide(); } }); } ```
在这个例子中，我们通过监听每张图片的load事件来确保所有图片加载完成后再开始轮播，避免了图片未加载完成导致的定位问题。
如果你遇到的问题不是这个，还请提供更详细的问题描述或代码片段，以便我能更准确地为你提供帮助。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部