js 触摸无限循环图片(手机端)

最新推荐文章于 2023-06-02 14:19:28 发布

原创最新推荐文章于 2023-06-02 14:19:28 发布 · 1.2k 阅读

5 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

2 篇文章

订阅专栏

css

1 篇文章

订阅专栏

本文介绍了一种基于HTML和JavaScript实现的移动端应用滑动布局方案。通过监听touchstart和touchmove事件，调整元素位置来实现流畅的左右滑动效果。

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

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<style>
	<!--
		#app{overflow:hidden;position:relative;height:110px}
		#applist{height:106px;padding-left:6px;position:absolute;left:0}
		.appitem{margin-left:10px;margin-top:15px;width:70px;height:74px;float:left}
		.appitem img{margin:0 2px 3px 2px;width:60px;height:57px;background-color:#fff;-moz-border-radius:9px;-khtml-border-radius:9px;-webkit-border-radius:9px;border-radius:9px}
		-->
</style>
<div id="app">
<div id="applist">
			<div class="appitem">
				<img src="1.png" width="60px;" height="60px;"/>
			</div>
			<div class="appitem">
				<img src="2.png" width="60px;" height="60px;"/>
			</div>
			<div class="appitem">
				<img src="3.png" width="60px;" height="60px;"/>
			</div>
			<div class="appitem">
				<img src="4.png" width="60px;" height="60px;"/>
			</div>
			<div class="appitem">
				<img src="5.png" width="60px;" height="60px;"/>
			</div>
			<div class="appitem">
				<img src="6.png" width="60px;" height="60px;"/>
			</div>
<div id="applistTwo"></div>
</div>
</div>
<script>
	document.getElementById("applist").addEventListener("touchstart",slidestart);
	document.getElementById("applist").addEventListener("touchmove",slide);
	document.getElementById("applistTwo").innerHTML = document.getElementById("applist").innerHTML;
	var startX;
	var startY;
	var currentX;
	var tempNum = 6;
	var width = tempNum*80*2;
	document.getElementById("applist").style.width = width +"px";
	function slidestart(e) {
	    startX = e.touches[0].clientX;
	    startY = e.touches[0].clientY;
	    currentX = document.defaultView.getComputedStyle(document.getElementById("applist"), null).left;
	}
	function slide(e) {
	    e.preventDefault();
	    newX = parseInt(currentX) + e.touches[0].clientX - startX;
	    if (newX > 0) {
	        newX =  -(width/2);
	        startX = e.touches[0].clientX;
	        currentX = document.defaultView.getComputedStyle(document.getElementById("applist"), null).left;
	    }
	    if (newX < - (width-300)) {
	        newX = -(width/2-300);
	        startX = e.touches[0].clientX;
	        currentX = document.defaultView.getComputedStyle(document.getElementById("applist"), null).left;
	    }
	    document.getElementById("applist").style.left = newX + "px";
	}
</script>

tempNum为共有多少个需要显示的资源,