图片切换+滑动切换

最新推荐文章于 2023-08-21 13:55:36 发布

陶小橦

最新推荐文章于 2023-08-21 13:55:36 发布

阅读量1.9k

点赞数 2

分类专栏： 2018-12-4 文章标签：移动端图片切换点击小图对应大图

本文链接：https://blog.csdn.net/weixin_43704691/article/details/88967546

版权

2018-12-4 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

样式

	<style>
		*{
			padding: 0;
			margin: 0;
		}
		
		html {
			height: 100%;
		}

		body {
			width: 100%;
			height: 100%;
			margin: 0;
			overflow: hidden;
		}		
		
		li{
			list-style: none;
		}

		.wrap {
			position: relative;
			overflow: hidden;
		}

		.box {
			position: absolute;
			list-style: none;
			left: 0;
			top: 0;
			padding: 0;
			margin: 0;
		}

		.box li {
			float: left;
		}

		.box {
			position: relative;
			height: 200px;
			width: 100%;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}

		.box1 {
			height: 200px;
			width: 750px;
			text-align: center;
		}
		.box1 img{
			height: 100%;
		}
		
		/* 小图样式 */
		.small_img{
			width: 100%;
			height: 50px;
			display: flex;
			margin-top: 5px;
		}
		.small_img li {
			flex: 1;
			text-align: center;
		}
		.small_img .active {
			border: 1px solid red;
		}
		.small_img li img{
			height: 100%;
		}
	</style>

html

<body>
   	<div class="wrap">
   		<!-- 大图 -->
   		<ul class="box">
   			<li>
   				<div class="box1 box2"><img src="img/a1.png" ></div>
   			</li>
   			<li>
   				<div class="box1 box3"><img src="img/a2.png" ></div>
   			</li>
   			<li>
   				<div class="box1 box4"><img src="img/a3.png" ></div>
   			</li>
   			<li>
   				<div class="box1 box5"><img src="img/a4.png" ></div>
   			</li>
   			<li>
   				<div class="box1 box6"><img src="img/a5.png" ></div>
   			</li>
   		</ul>
   		<!-- 小图 -->
   		<ul class="small_img">
   			<li data-id = "0" class="active"><img src="img/a1.png" ></li>
   			<li data-id = "1"><img src="img/a2.png" ></li>
   			<li data-id = "2"><img src="img/a3.png" ></li>
   			<li data-id = "3"><img src="img/a4.png" ></li>
   			<li data-id = "4"><img src="img/a5.png" ></li>
   		</ul>
   	</div>
   </body>
</html>

<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
   	<script>
   		// 设置盒子的宽度
   		$('.box').css('width', $('.box li').length * 100 + '%');
   		$('.box li').css('width', 1 / $('.box li').length * 100 + '%');

   		// 初始化手指坐标点
   		var startPoint = 0;
   		var startEle = 0;
   		//手指按下
   		$('.wrap').on("touchstart", function(e) {
   			startPoint = e.originalEvent.changedTouches[0].pageX;
   			startEle = $('.box').offset().left;
   		});
   		
   		//手指滑动
   		$('.wrap').on("touchmove", function(e) {
   			var currPoint = e.originalEvent.changedTouches[0].pageX;
   			var disX = currPoint - startPoint;
   			var left = startEle + disX;
   			$('.box').css('left', left + 'px')
   		});
   		
   		//当手指抬起的时候，判断图片滚动离左右的距离
   		$('.wrap').on("touchend", function(e) {				
   			var left = $('.box').offset().left;
   			// 判断正在滚动的图片距离左右图片的远近，以及是否为最后一张或者第一张
   			var currNum = Math.round(-left / $('.box li')[0].offsetWidth);
   			currNum = currNum >= ($('.box li').length - 1) ? $('.box li').length - 1 : currNum;//右边界检测
   			currNum = currNum <= 0 ? 0 : currNum;//左边界检测
   			$('.box').css('left', -currNum * $('.wrap')[0].offsetWidth + 'px');
   			$('.small_img li').removeClass('active');
   			$('.small_img li').each(function (index,element) {
   				if($(element).attr('data-id') == currNum){
   					$(element).addClass('active')
   				}
   			})
   		})
   				
   		//点击小图移动到对应大图
   		$('.small_img').on('click','li',function(){
   			$('.box').css('left', -$(this).attr('data-id') * $('.wrap')[0].offsetWidth + 'px');
   			$('.small_img li').removeClass('active');
   			$(this).addClass('active');
   		})
   	</script>

呈现
在这里插入图片描述

陶小橦

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
图片切换+滑动切换

样式 <style> *{ padding: 0; margin: 0; } html { height: 100%; } body { width: 100%; height: 100%; margin: 0; overflow: hidden; } li{ list-style: n...
复制链接

扫一扫