<!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实现的超平滑的水平和垂直图片轮播特效代码，就是大家熟悉的幻灯片特效、焦点图特效等，animateType参数中设置，目前支持default, rotate, flip 和 depth, 点击按钮看效果，一共包括了4种轮播效果，不...
html5 CSS3代码仿Android智能手机界面滑动登录/注册切换，在PC端用Chrome测试出来的效果是左右滑动，不过作者描述的是上下滑动，可能在手机上是上下滑动吧，看上去很漂亮。寄语：H5登录界面，好久没发布效果了。忘...
超实用的jQuery代码段精选近350个jQuery代码段，涵盖页面开发中绝大多数要点、技巧与方法，堪称史上最实用的jQuery代码参考书，可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...
[3]---事件选择 - WSAEventSelect [4]---重叠I [5]---完成端口 IP所在地查询器 如题。 jpeglib_demo 处理Jpeg图片。 KeyHook 键盘钩子，截获键盘信息。 Kugou7+UI 界面设计。学习界面的好实例，强烈推荐。 自绘...
1、包含jquery、touchslider的js插件代码，以及两个使用案例，其中test.html为关键的注释版例子。 2、该代码主要展示了手机端H5滑动切换页面的使用方法。
手机端手势操作，电脑端上下左右wasd 扫雷丨闯关版 从一个雷递增，只有最无聊的那个人才能通关。点击掀开，长按插旗 连连看丨王者荣耀版 完成有奖励哦 贪吃蛇 这个贪吃蛇可以穿墙还可以吃屎 打砖块 这个版本不...
Markdown：在线编辑器GifCam：Gif录制工具 微信小程序开发文档Iconfont-阿里巴巴矢量图标库：各种需要的小图标都有哦遇到的几个问题1、首页导航栏左右滑动效果图： 这部分，是通过微信小程序的scroll-view组件来...
利用Delphi的代码在VC中显示JPG图片，不使用动态连接库。 Mail_Report.zip 一个邮件报告程序。 SrcFirstProg.zip 解释了最基本的MFC程序流程。 tabcontrol_demo.zip tabcontrol_src.zip 自定义的标签控件对话框...
利用Delphi的代码在VC中显示JPG图片，不使用动态连接库。 Mail_Report.zip 一个邮件报告程序。 SrcFirstProg.zip 解释了最基本的MFC程序流程。 tabcontrol_demo.zip tabcontrol_src.zip 自定义的标签控件对话框...
js/java代码互调,返回键回退,页面适应手机屏幕,读取cookie,远端调试webView页面... TextRelatedDemo 项目过程中碰到的相关问题汇总 简单的图文混排实现(Html.fromHtml / span); 自定义控件圆圈文字的实现(主要是text...
利用Delphi的代码在VC中显示JPG图片，不使用动态连接库。 Mail_Report.zip 一个邮件报告程序。 SrcFirstProg.zip 解释了最基本的MFC程序流程。 tabcontrol_demo.zip tabcontrol_src.zip 自定义的标签控件对话框...
利用Delphi的代码在VC中显示JPG图片，不使用动态连接库。 Mail_Report.zip 一个邮件报告程序。 SrcFirstProg.zip 解释了最基本的MFC程序流程。 tabcontrol_demo.zip tabcontrol_src.zip 自定义的标签控件对话框...
利用Delphi的代码在VC中显示JPG图片，不使用动态连接库。 Mail_Report.zip 一个邮件报告程序。 SrcFirstProg.zip 解释了最基本的MFC程序流程。 tabcontrol_demo.zip tabcontrol_src.zip 自定义的标签控件对话框...
7、焦点图模块通过焦点图模块可以在首页首屏重点推荐与展示视频或广告图片，移动端与PC端独立管理，支持手机滑动。8、广告模块系统预留多个广告位，移动端与PC端独立管理，只需在后台对应广告位添加广告代码即可，可...