JavaScript实现移动端带transition动画的轮播

最新推荐文章于 2022-12-09 12:30:52 发布

置顶

qq_34220109

最新推荐文章于 2022-12-09 12:30:52 发布

阅读量360

点赞数 1

分类专栏：移动端 JavaScript原生轮播文章标签： javascript css3 html5

本文链接：https://blog.csdn.net/qq_34220109/article/details/105006849

版权

本文介绍如何使用JavaScript原生代码实现移动端的带transition动画的自动和手动轮播效果，包括确定播放方向、处理首尾图片的无缝连接以及标记跟随。文章提供了HTML、CSS和JavaScript代码示例，并提示可能存在的一些算法优化空间。

摘要由CSDN通过智能技术生成

## JavaScript原生实现带transition动画的自动+手动轮播

JavaScript实现轮播的方式多种多样，桌面的移动端的实现方式都是大同小异的，具体的核心实现原理不外乎下面几个要点。即：
1. 确定播放方向。一般都是横向轮播，当然不排除纵向的需求可能。当然还有反向播放情况，这个自定义。
2. 对第一张图片的处理。如果当前是第一张了，那么如果继续往前面(就是你播放方向的反向)滑动，那么就会出现留白（如果你允许继续滑动的话，不过不允许滑动也没有啥意思了，除非你想来回轮播，这个我在另一篇用jQuery也说明过），此时应该让你的左边显示应该轮播图片的最后一张，实现无缝连接。
3. 对最后一张图片的处理。跟第一张一样，你需要在继续滑动的时候显示第一张图片，实现无缝连接。
4. 对标记跟随原点的处理。这个需要对原点的排列方式和下标进行严谨的逻辑判断。

我这里是在移动端的一个轮播效果，纯JavaScript原生实现，应该说很接近工作实际了。请诸位爷上眼。

注意：如果您想实现跟我一样的效果，请务必按我的样式和架构来写
HTML部分

<div id="box">
	<ul id="lilist">
		<li><img src="5.jpg" alt=""></li>
		<li><img src="1.jpg" alt=""></li>
		<li><img src="2.jpg" alt=""></li>
		<li><img src="3.jpg" alt=""></li>
		<li><img src="4.jpg" alt=""></li>
		<li><img src="5.jpg" alt=""></li>