手机web显示滑动下一张图片资源-CSDN文库

共14个文件

jpg：5个

png：3个

js：3个

需积分: 10 74 浏览量 2015-06-15 09:53:16 上传评论收藏 768KB ZIP 举报

在移动设备上，为了提供更好的用户体验，Web开发者经常需要实现图片滑动展示的功能。这个功能让用户可以通过手势（如滑动）来浏览一组图片，而不仅仅依赖于点击按钮。标题"手机web显示滑动下一张图片"所涉及的核心知识点是触摸事件处理和图片轮播效果的实现。我们需要理解触摸事件。在移动设备上，用户与屏幕的交互主要是通过触摸，而不是鼠标点击。HTML5引入了专门针对触摸操作的API，包括`touchstart`、`touchmove`、`touchend`和`touchcancel`等事件。这些事件对应于用户触摸屏幕开始、移动、结束和取消触摸的动作。我们可以通过监听这些事件，来实现图片的滑动切换。例如，当用户在图片上执行`touchstart`时，我们可以记录初始的触摸位置；在`touchmove`事件中，获取手指移动的距离；当`touchend`发生时，判断移动距离是否超过某个阈值，如果超过了，就切换到下一张图片。此外，为了避免误触，我们还需要在`touchcancel`事件中进行相应的清理工作。描述中提到“可以用来制作删除按钮之类的”，这可能意味着代码中可能包含了一个隐藏或可见的删除按钮，用户可以通过特定的手势触发。在实际应用中，这可能涉及到CSS的隐藏和显示控制，以及JavaScript的逻辑处理，确保只有在特定条件下（比如滑动达到一定距离或者特定方向）才会显示删除按钮，并且在用户确认后执行删除操作。为了让图片自适应屏幕大小，我们需要使用CSS的响应式设计技术。这通常包括设置图片的`max-width`为100%，以及可能的`height:auto`，以保持原始比例缩放。这样，无论设备屏幕尺寸如何，图片都能适应并填充容器，而不会失真。描述中提到“网页上使用下一张点击”，这意味着除了触摸滑动外，还应提供一种点击方式供非触摸设备用户使用，例如在图片下方添加一个明显的“下一张”按钮，用户点击后可以切换到下一张图片。实现"手机web显示滑动下一张图片"的功能需要掌握以下技术点： 1. 触摸事件处理：`touchstart`, `touchmove`, `touchend`, 和 `touchcancel`。 2. 图片的响应式布局：使用CSS确保图片在不同设备上都能自适应显示。 3. 逻辑判断：根据触摸移动距离判断是否切换图片或显示删除按钮。 4. 用户交互设计：提供点击切换的替代方案，以兼容非触摸设备。压缩包文件名"touchSlider"可能包含了一个实现这些功能的滑动图片组件或示例代码，你可以通过查看和学习这个组件的源码，深入了解这些技术的应用。

资源推荐

资源详情

资源评论

收起资源包目录

touchSlider.zip （14个子文件）

touchSlider

css

style.css 2KB

images

btn_main_img.png 3KB

img_main_2.jpg 236KB

img_main_4.jpg 190KB

img_main_1.jpg 184KB

img_main_5.jpg 180KB

img_main_3.jpg 104KB

Thumbs.db 17KB

hover_right.png 4KB

hover_left.png 4KB

index.html 3KB

jquery.event.drag-1.5.min.js 2KB

jquery-1.7.1.min.js 92KB

jquery.touchSlider.js 11KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>jQuery手机图片触屏滑动轮播效果代码</title> <link type="text/css" href="css/style.css" rel="stylesheet"/> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"></script> <script type="text/javascript" src="js/jquery.touchSlider.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".main_visual").hover(function(){ $("#btn_prev,#btn_next").fadeIn() },function(){ $("#btn_prev,#btn_next").fadeOut() }); $dragBln = false; $(".main_image").touchSlider({ flexible : true, speed : 200, btn_prev : $("#btn_prev"), btn_next : $("#btn_next"), paging : $(".flicking_con a"), counter : function (e){ $(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on"); } }); $(".main_image").bind("mousedown", function() { $dragBln = false; }); $(".main_image").bind("dragstart", function() { $dragBln = true; }); $(".main_image a").click(function(){ if($dragBln) { return false; } }); timer = setInterval(function(){ $("#btn_next").click(); }, 5000); $(".main_visual").hover(function(){ clearInterval(timer); },function(){ timer = setInterval(function(){ $("#btn_next").click(); },5000); }); $(".main_image").bind("touchstart",function(){ clearInterval(timer); }).bind("touchend", function(){ timer = setInterval(function(){ $("#btn_next").click(); }, 5000); }); }); </script> </head> <body> <div class="main_visual"> <div class="flicking_con"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> </div> <div class="main_image"> <ul> <li><span class="img_3"></span></li> <li><span class="img_4"></span></li> <li><span class="img_1"></span></li> <li><span class="img_2"></span></li> <li><span class="img_5"></span></li> </ul> <a href="javascript:;" id="btn_prev"></a> <a href="javascript:;" id="btn_next"></a> </div> </div>  <div style="text-align:center;"> <p>来源：<a href="http://www.mycodes.net/" title="源码之家" target="_blank">源码之家</a></p> </div> </body> </html>

评论收藏

内容反馈