无缝传送带原理图
1。HTML结构：
Javaｓｃｒｉｐｔ：
旋转木马图*
函数横幅（）{
VaR的旗帜= document.queryselector（旗帜。）；
获取设备宽度
无功offsetwidth = banner.offsetwidth；
照片集装箱
VaR ImageBox = banner.queryselector（'ul：第一个孩子）；
向图片容器添加过渡动画属性
功能addtransition（）{
imagebox.style.transition =0.5s；
imagebox.style.webkittransition =0.5s；
}
*清晰的图片添加过渡动画属性容器
功能removetransition（）{
imagebox.style.transition =不关；
imagebox.style.webkittransition =不关；
}
设置x轴定位
功能settranslatex（offsetx）{
imagebox.style.transform = 'translatex（+ offsetx + 'px ；
imagebox.style.webkittransform = 'translatex（+ offsetx + 'px ；
}
当前索引的定义
var指数= 1；
自动/旋转木马
VaR定时器= setInterval（）函数（）{
索引+；
addtransition（）；
settranslatex（指数* offsetwidth）；
css同步设置
底层异步操作
}，2000）；
transvar.transitionend（图像框，功能）{ / /（监控每一次动画的结束
如果（索引> = 9）{当旋转木马到第九时无缝切换到第一个图片时
索引= 1；
移除/转换
removetransition（）；
没有找到第一幅图片的动画
settranslatex（指数* offsetwidth）；
}
}）；
}
Javaｓｃｒｉｐｔ：监视动画事件的结束
window.transvar = {}； / /定义一个全局对象窗口
/ /结束事件监测CSS3过渡动画
transvar.transitionend =功能（obj，回调）{
如果（typeof obj = = 'object）{
Obj.addEventListener（'webkittransitionend功能）{ / /（兼容写作
回调函数；回调函数；如果回调函数存在，则调用回调函数。
}）
Obj.addEventListener（'transitionend，函数（）{（）{
回调回调（）；
}）
}
}
摘要：在一个无缝的转盘使用CSS3的时候，开始一直纠缠先做无缝切换，有一个相对简单的想法
在旋转木马的过程思维，直接决定第九个图像，然后调用removetransition（）；取消过渡，然后改变指数= 1，让它无缝切换到第一，而我认为自信是完整的，但它给了我的手！！！！！！
VaR定时器= setInterval（）函数（）{
索引+；
addtransition（）；
settranslatex（指数* offsetwidth）；
如果（索引> = 9）{当旋转木马第九时，不调用监视器动画事件，取消转换状态
removetransition（）；
索引= 1；
settranslatex（指数* offsetwidth）；
}
}，2000）；
所以hellip；为什么这是为什么
由于CSS3的过渡是一个异步事件，我意识到是我年少无知时。
然后，由于异步事件，我们需要使用监视事件来监视每个转换状态的结束。
然后判断当前下标是否在最后一个下标中。
没有动画状态切换到第一个。
这是一个完整的实现CSS3无缝传送带，通常在坑里，然后通过自己的研究，慢慢自然就没有了这样一个问题，前端的道路是漫长的，让我们继续加油！！！！！