<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Insert title here</title>
<!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />-->
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
var current = null;
window.onload = function() {
current = $('#image1');
$("#div222").on("swipeleft",function(){
left();
});
$("#div222").on("swiperight",function(){
right();
});
}
var left = function() {
if(!current.next().is('img')) {
return;
}
current.animate({marginLeft:-800},'fast',function() {
if(current.next().is('img')) {//这个if是防止连续点击导致的BUG
current = current.next();
}
});
}
var right = function() {
if(!current.prev().is('img')) {
return;
}
current.prev().animate({marginLeft:0},'fast',function() {
if(current.prev().is('img')) {//这个if是防止连续点击导致的BUG
current = current.prev();
}
});
}
</script>
</head>
<body>
<div style="width: 800px;margin: auto;overflow: hidden;">
<div id="div222" style="width: 30000px;height: 300px;">
<img id="image1" src="img1.jpg" width="800px;" height="300px;"><img id="image2" src="img2.jpg" width="800px;" height="300px;"><img id="image3" src="img3.jpg" width="800px;" height="300px;">
</div>
</div>
<br>
<center>
<button onclick="left()"> < </button>
<button onclick="right()">></button>
</center>
</body>
</html>
分享到：
相关推荐
在移动设备上，为了提供优秀的用户体验，网页设计者经常需要实现一些特定的交互效果，比如手机端网页上下手指滑动来切换图片的功能。这个功能可以让用户通过手势轻松浏览一系列图片，增强网页的互动性和吸引力。在...
【纯 js 仿手机桌面左右滑动切换图片】是一个典型的前端开发项目，主要涉及JavaScript语言，用于实现类似手机桌面的图片浏览效果，用户可以通过左右滑动屏幕来切换不同的图片。这个项目的核心技术主要包括以下几个...
总的来说，"jQuery+html5手机触屏滑动图片切换代码"项目涵盖了前端开发中的多个核心知识点，包括响应式设计、触控事件处理、CSS3动画和JavaScript插件开发。理解并掌握这些技术对于构建优秀的移动端网页应用至关重要...
**jQuery响应式手机端触屏滑动图片轮播插件** 在现代网页设计中，图片轮播已经成为一种常见的展示方式，特别是在手机端，它能够高效地利用有限的屏幕空间来展示多张图片或内容。jQuery作为一款轻量级的JavaScript库...
总的来说，"jQuery适合手机端滑动解锁代码"是一个集成了事件处理、路径比对和动画效果的综合实例，展示了jQuery在移动端增强交互性方面的强大能力。对于开发者来说，掌握这种技术不仅可以提升网页或应用的趣味性和...
《iSlider：手机端图片滑动切换的JS特效详解》 在移动互联网时代，用户界面的设计与交互体验显得尤为重要，特别是在手机端，优秀的图片展示方式能够极大地提升用户体验。"iSlider"作为一款专为手机端设计的图片滑动...
本文将深入探讨如何使用JavaScript来制作一个适用于手机端的手势滑动图片轮播代码。 首先，我们需要了解JavaScript的基本语法和事件监听机制。JavaScript是网页动态效果的核心，它能与用户交互，改变HTML和CSS。在...
这个"jQuery手机触摸滑动切换图片代码.zip"包提供了一个利用jQuery和flickity.pkgd插件来实现这种功能的解决方案。下面我们将深入探讨相关知识点。 首先，jQuery是一个流行的JavaScript库，它简化了DOM操作、事件...
【jQuery手机端商品手指滑动切换代码】是一个专为移动端设计的JavaScript库，它使得在手机设备上浏览商品图片变得更加顺畅和互动。这个特效利用了jQuery的事件处理和DOM操作功能，来实现用户通过手指滑动来切换商品...
这个压缩包"zepto.js手机端网页上下手指滑动图片切换效果代码.zip"包含了使用zepto.js实现在手机网页上通过上下滑动手势切换图片的代码示例，同时也支持音乐播放功能，适应各种手机屏幕尺寸。 在移动设备上，触摸...
综上所述，"js手机端带进度条图片展示触屏滑动效果"涉及到的技术点包括：JavaScript和jQuery的事件监听与处理、CSS3的布局和动画、图片加载进度的可视化以及触摸事件的处理。通过合理地整合这些技术，开发者可以构建...
至此，我们已经讨论了如何使用jQuery和jquery.slideunlock插件创建一个基本的手机端滑动解锁效果。这个例子只是一个起点，你可以进一步定制这个组件，比如添加动画效果、声音反馈，或者与其他功能集成，比如验证用户...
在"swiper圆角卡片式手机触屏滑动图片切换代码"中，它被用来实现了一种手机端的图片展示功能，允许用户通过触屏滑动或点击索引按钮来切换图片。以下是关于这个主题的一些关键知识点： 1. **Swiper插件**: Swiper 是...
手机端滑动的核心在于监听用户的触摸动作，这通常通过JavaScript的`touchstart`、`touchmove`和`touchend`事件来完成。当用户手指触碰屏幕时触发`touchstart`，手指移动时触发`touchmove`，手指离开屏幕时触发`...
【标题】"H5手机端图片列表滑动切换代码.zip" 涉及的主要知识点是HTML5、CSS和JavaScript，特别是jQuery库的应用以及移动端网页的交互设计。在移动设备上，用户界面的设计需要考虑到触屏操作和较小的屏幕尺寸，因此...
这个压缩包“HTML5实现手机端图片列表滑动展示特效代码.zip”显然是包含了一个用于在手机端创建图片列表滑动展示效果的代码示例。这种效果在现代的手机应用和网页设计中非常常见，比如在社交媒体应用、电商网站和...
`jQuery`，作为一个广泛使用的JavaScript库，虽然默认不包含对触摸事件的处理，但可以通过各种插件来扩展其功能，比如本话题提到的"基于jQuery的手机触摸屏事件插件"。这个插件，名为`TouchSwipe`，专门设计用于识别...
本资源“html5手机版右侧导航菜单栏滑动代码.zip”就是一个实例，展示了如何利用HTML5、CSS3以及JavaScript实现一个绿色的手机右侧滑动导航菜单。下面我们将详细探讨其中涉及的关键知识点。 首先，HTML5是现代网页...
在这个“swiper手机端左右滑动天气预报代码”项目中，开发者利用Swiper库的特性，构建了一个动态展示天气预报的解决方案，让用户通过简单的左右滑动手势获取不同日期或地点的天气情况。 Swiper库主要特点包括： 1....
本示例中提到的"html5手机端点击滑动展开侧边栏菜单代码"是移动Web应用中常见的设计模式，通常被称为抽屉式导航或者侧滑菜单。这种菜单在小屏幕设备上尤其实用，因为它可以节省空间，只在需要时显示菜单选项。 在...