移动端轮播图

最新推荐文章于 2024-06-27 19:48:27 发布

裴嘉靖

最新推荐文章于 2024-06-27 19:48:27 发布

阅读量224

点赞数

本文链接：https://blog.csdn.net/peijiajing/article/details/105393024

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
	<title>Document</title>
	<link rel="stylesheet" href="css/index.css">
	<script src="js/jquery.js"></script>
	<script src="js/index.js"></script>
</head>
<body>
	<div id="box">
		<div class="tp">
		</div>
	</div>
	
</body>
</html>

*{
	margin: 0;
	padding: 0;
	border: 0;
}
a{
	text-decoration: none;
}
body{
	font-size: 14px;
}
#box{
	width: 100%;
}
#box .tp img{
	width: 100vw;
}

$(function(){
	var $tp=$("#box .tp")
	var images=[
	'<a href="#"><img src="images/t1.png" /></a>',
	'<a href="#"><img src="images/t2.png" /></a>',
	'<a href="#"><img src="images/t3.png" /></a>',
	'<a href="#"><img src="images/t4.png" /></a>',
	'<a href="#"><img src="images/t5.png" /></a>',
	'<a href="#"><img src="images/t6.png" /></a>',
	'<a href="#"><img src="images/t7.png" /></a>'
	]
	$tp.append(images)

	//设置图片容器tp的宽度
	var imagesLength=images.length;
	var imageWidth=$tp.eq(0).width();
	var $tpWidth=imagesLength*imageWidth;
	$tp.css("width",$tpWidth+"px");

	//默认让第二张图片显示出来
	$tp.css("margin-left",-imageWidth+"px")

	var startX,startY;
	var endX,endY;
	box.addEventListener("touchstart",function(event){
		startX=event.touches[0].clientX;
		startY=event.touches[0].clientY;
	})

	box.addEventListener("touchmove",function(event){
		event.preventDefault();
		endX=event.changedTouches[0].clientX;
		endY=event.changedTouches[0].clientY;
	})

	box.addEventListener("touchend",function(event){
		var x=startX-endX;
		var y=startY-endY;
		
		if(Math.abs(x)>Math.abs(y) && endX<startX){
			console.log("右到左")
			$tp.animate({
				"margin-left":"-=" + imageWidth + "px"
			},300,function(){
				var temp=images.shift();
				images.push(temp);
				$tp.html(images);
				$tp.css("margin-left",-imageWidth + "px")
			})
		}

		if(Math.abs(x)>Math.abs(y) && endX>startX){
			console.log("左到右")
			$tp.animate({
				"margin-left":"+=" + imageWidth + "px"
			},300,function(){
				var temp=images.pop();
				images.unshift(temp);
				$tp.html(images);
				$tp.css("margin-left",-imageWidth + "px")
			})
		}

	})

})

裴嘉靖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
移动端轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/> <title>Doc...
复制链接

扫一扫