3.22 study 移动端轮播图制作（一） js_js轮播图制作app端-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52037321/article/details/123672971

博主分享了移动端touch事件的应用，包括自动播放图片的滑动效果和无缝滚动的圈圈跟随功能，使用了CSS3的transform和classList属性优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先老规矩汇报学习进度151/167 快快快又快要学完了，今天进度还算可以把，先说一下今天学习了移动端的touch事件就两个简单的移动的功能我直接贴出来好了

图片自动播放：


			
			//	定时器自动播放图片  移动端 	transform 
			var focus = document.querySelector('.focus')
			var ul = focus.children[0];
			var focus_width = focus.offsetWidth
			var cnt = 0 // 计数器
			console.log(ul.children.length-1)
			var timer = setInterval(function(){
			
				
				cnt++;
				var move = -cnt*focus_width
				console.log(focus_width)
				ul.style.transform = 'translateX('+move+'px)'
				// 慢慢移动加入过度元素
				ul.style.transition = 'all .3s'// 滚动后在判断
				
			},1000)

圈圈跟随：

			var ol= focus.children[1]
			ul.addEventListener('transitionend',function(){
					if(cnt >= ul.children.length-2) // 前面多给了一张
				{
					cnt = 0
					console.log(cnt)
					var move = -cnt*focus_width
					// 去过度 
					ul.style.transition = 'none'
					ul.style.transform = 'translateX('+move+'px)'
	
				}
				else if (cnt < 0){
					cnt = ul.children.length-1
					var move = -cnt*focus_width
					ul.style.transition = 'none'
					ul.style.transform = 'translateX('+move+'px)'
				}
				ol.querySelector('.current').classList.remove('current')
				ol.children[cnt].classList.add('current')
			})

今天学了一个优化就是classList 属性比双重循环感觉更省时间，其他的没啥基本的思路跟前面网页端的差不多把，不过需要注意就是加了2张照片第一张是最后一张图片，最后一张图片是第一种张

大概就是这样的意思，没有flex js布局浏览器模拟有时候不太行，下次把flex JS 补上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.focus{
				position: relative;
				
			}
			.focus ul {
				width: 700%;/* 要图片的张数*/
				overflow: hidden;
				margin-left:-100% ;
			}
			
			.focus ul li {
				float: left;
				width: 14.285%; /*ul/li 个数就行了*/
			}
			.focus ul li img{
				width: 100%;
				height: 400px;
			}
			.focus ol {
				position: absolute;
				bottom:5px;

			}
			.focus ol li{
				list-style: none;
				width: 10px;
				height: 10px;
				background-color:  red/*#fff*/;
				border-radius:50% ;
				display: inline-block;
				transition: all .3s;
			}
			.focus ol .current{
				width: 18px;
				border-radius:35% ;
				
			}
		</style>
	</head>
	<body>
		<div class="focus">
			<ul>
				<!--// 需要补两张图片 第一张前面方最后一直， 第一张放在最后面-->
				<li><img src="img/5.jpg" alt="" /></li>
				<li><img src="img/1.jpg" alt="" /></li>
				<li><img src="img/2.jpg" alt="" /></li>
				<li><img src="img/3.jpg" alt="" /></li>
				<li><img src="img/4.jpg" alt="" /></li>
				<li><img src="img/5.jpg" alt="" /></li>
				<li><img src="img/1.jpg" alt="" /></li>
			</ul>
			<ol class ='circle'>
				<li class="current"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>

			</ol>
			<!--transform 移动不需要定位-->
		</div>
		<script>
			//功能
			
			//	定时器自动播放图片  移动端 	transform 
			var focus = document.querySelector('.focus')
			var ul = focus.children[0];
			var focus_width = focus.offsetWidth
			var cnt = 0 // 计数器
			console.log(ul.children.length-1)
			var timer = setInterval(function(){
			
				
				cnt++;
				var move = -cnt*focus_width
				console.log(focus_width)
				ul.style.transform = 'translateX('+move+'px)'
				// 慢慢移动加入过度元素
				ul.style.transition = 'all .3s'// 滚动后在判断
				
			},1000)
			// 无缝滚动
			// 新事件 transformend 过度完成后在判断
			var ol= focus.children[1]
			ul.addEventListener('transitionend',function(){
					if(cnt >= ul.children.length-2) // 前面多给了一张
				{
					cnt = 0
					console.log(cnt)
					var move = -cnt*focus_width
					// 去过度 
					ul.style.transition = 'none'
					ul.style.transform = 'translateX('+move+'px)'
	
				}
				else if (cnt < 0){
					cnt = ul.children.length-1
					var move = -cnt*focus_width
					ul.style.transition = 'none'
					ul.style.transform = 'translateX('+move+'px)'
				}
				ol.querySelector('.current').classList.remove('current')
				ol.children[cnt].classList.add('current')
			})
			// 小圆圈滚动效果 classlist 属性
			
			
		</script>
	</body>
</html>

上面全部代码，下面效果图

学习进度

最后总结一下：

今天学了大概2个半小时，有些松懈不过还有把，今天学的东西感觉不是很难，可能就是transition css3动画的效果全部忘了就是，自我状态还是比较好的。最后写一句文案：不知道从什么时候开始，在每个东西上面都有个日子，秋刀鱼会过期，肉酱也会过期，连保鲜纸都会过期，我开始怀疑，在这个世界上，还有什么东西是不会过期的，如果记忆也是一个罐头的话，我希望这罐罐头不会过期。