HTML5实现动画轮播和手势控制

最新推荐文章于 2024-05-28 19:26:08 发布

原创最新推荐文章于 2024-05-28 19:26:08 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #java web #小米 #css #标签

HTML5 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在HTML5中实现动画轮播，并着重讨论了手势控制的难点。在寻找适合的轮播框架未果后，作者通过借鉴小米商城页面的代码，自行实现了触摸控制功能。项目背景是一个java web服务窗项目，作者负责前端页面的制作，最终成功解决了轮播图的手动滑动问题。

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

让Android融入我的生活！

公司要求作一个服务窗的项目，是一个java web，让我负责写页面，后台逻辑由另外一个同事负责，之前很早接触html，div+css，table，还有其他各种标签，各种样式，到现在都忘的一干二净了，但是工作，又要重新拿起来了，先找一下轮播的框架，在网上各种搜索用尽，结果找出来的项目要么集成很高，修改起来特别麻烦，连找个根样式都费半天劲；要么实现不合要求，最后还是问了下我们公司的java web同事，才算解决了。

先来看一下项目结构

网上轮播的框架确实很多，小米商城的页面应该是比较好的，代码也简洁，大家有兴趣可以自己去看看，关键难点就在手指实现触摸控制，网上找的好多都实现不了，还是自己写的比较靠谱，好了，废话不多说，先看效果，再上代码

下面为主页面的代码，用了iframe添加了一个轮播页面进来：




	
		
		
  
		
  
		 href="css/bootstrap.min.css" rel="stylesheet" media="screen">
		 href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">
		
		
		
		
	

	
		
  
					
					
				

					
					
				
		 src="1.html" width="100%" height="160px" frameborder="0">
		
   旗舰产品 
				  金牛 
				
 爆软 
				
 第三方 
				
 充值

下面为轮播页面的框架和手势触摸控制，也是整个index.html中的iframe：




	
		
		
   
		
   
		 href="css/bootstrap.min.css" rel="stylesheet" media="screen">
		 href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">