1. <!DOCTYPE HTML>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <script src='jquery-1.6.1.js'></script>
  7. </head>
  8.  
  9. <style>
  10. .border-img{border:8px solid #ccc;}
  11. </style>
  12.  
  13. <body>
  14.  
  15.    <div class='div-img'>
  16.          <img class='border-img' style='width:100px;height:60px;' src='1.jpg'/>
  17. 	     <img style='width:100px;height:60px;' src='2.jpg'/>
  18. 	     <img style='width:100px;height:60px;' src='3.jpg'/>
  19. 		 <img style='width:100px;height:60px;' src='4.jpg'/>
  20.  
  21.    </div>
  22.  
  23.    <div id="click">
  24.  
  25.       <input id='prev' type='button' value="prev"/>
  26.  
  27. 	  <input id='next' type='button' value="next"/>
  28.  
  29.    </div>
  30.  
  31.    <script>
  32.     //版本号一
  33.  
  34. 	  var imgLength=$(".div-img img").length;
  35.  
  36.       var point=0;
  37.       $("#prev").click(function(){
  38.  
  39. 	    if(point<=0)
  40. 		{
  41. 		  return false;
  42. 		}	
  43.  
  44. 		point--;
  45. 		$(".div-img img").removeClass('border-img');
  46. 		$(".div-img img").eq(point).addClass('border-img'); 
  47.  
  48. 	  });
  49.  
  50. 	  $("#next").click(function(){
  51.  
  52. 		if(point>=imgLength-1)
  53. 		{
  54. 		  return false;
  55. 		}
  56.  
  57. 		point++;
  58. 		$(".div-img img").removeClass('border-img');
  59. 		$(".div-img img").eq(point).addClass('border-img');
  60.  
  61. 	  });
  62.  
  63. 	  //版本号二 循环
  64. 	  /*
  65. 	  var imgLength=$(".div-img img").length;
  66.  
  67.       var point=0;
  68.       $("#prev").click(function(){
  69.  
  70. 	    if(point<=0)
  71. 		{
  72. 		  point=imgLength-1
  73. 		}
  74. 		else{
  75.  
  76. 		point--;
  77.  
  78. 		}
  79.  
  80. 		$(".div-img img").removeClass('border-img');
  81. 		$(".div-img img").eq(point).addClass('border-img'); 
  82.  
  83. 	  });
  84.  
  85. 	  $("#next").click(function(){
  86.  
  87. 		if(point>=imgLength-1)
  88. 		{
  89. 		  point=0;
  90. 		}
  91.  
  92. 		else
  93. 		{
  94. 		   point++;
  95. 		}
  96.  
  97. 		$(".div-img img").removeClass('border-img');
  98. 		$(".div-img img").eq(point).addClass('border-img');
  99.  
  100. 	  });
  101. 	  */
  102.  
  103.    </script>
  104.  
  105. </body>
  106. </html>

写了两个版本号，一个是来回循环的，另外一个不是来回循环的，使用前请先引用jquery文件，和使用正确的图片地址

jquery相冊图片来回选择的更多相关文章

  1. Android之本地相冊图片选取和拍照以及图片剪辑

    转载请注明出处:http://blog.csdn.net/loveyaozu/article/details/51160482 相信有非常多Android开发者在日常开发中,因为项目需求,须要我们的A ...

  2. Android调用相机实现拍照并裁剪图片，调用手机中的相冊图片并裁剪图片

    在 Android应用中,非常多时候我们须要实现上传图片,或者直接调用手机上的拍照功能拍照处理然后直接显示并上传功能,以下将讲述调用相机拍照处理图片然后显示和调用手机相冊中的图片处理然后显示的功能,要 ...

  3. Android实现批量照片上传至server，拍照或者从相冊选择

    近期因为项目需求,须要完毕批量照片上传,折腾了一段时间,最终完毕了,达到了例如以下效果 主界面主要有GridView组成和button组成,当按下一个格点时,会调用相机或者相冊,拍照或者选择相冊照片, ...

  4. android开发——从相冊中选择图片不裁剪

    转载请注明出处:http://blog.csdn.net/zhoubin1992/article/details/46864777 问题: 在郭神的第一行代码中,第8章的从相冊中选择图片这块,从相冊选 ...

  5. Android上传图片之调用系统拍照和从相冊选择图片

    Android上传图片之调用系统拍照和从相冊选择图片 本篇文章已授权微信公众号 guolin_blog (郭霖)独家公布 前言: 万丈高楼平底起,万事起于微末.不知不觉距离上篇博文已近四个月,2015 ...

  6. Qt 打开安卓相冊选择图片并获取图片的本地路径

    Qt 打开安卓相冊选择图片并获取图片的本地路径 过程例如以下: 通过 Intent 打开安卓的系统相冊. 推荐使用 QAndroidJniObject::getStaticObjectField 获取 ...

  7. 最蛋疼的bug：读取图片缩略图（一定要在相冊查看下形成缓存）

    近期的一个连接服务端的应用.须要读取图片,一般供用户公布商品选择上传图片.初始的图片列表应该是缩略图.仅仅有确定了,才上传原图,OK不多说上代码 package edu.buaa.erhuo; imp ...

  8. iOS图片加水印效果的实现并保存至相冊

    图片加水印效果的实现并保存至相冊 实现效果如图: project下载:githubproject下载链接 代码: - (void)viewDidLoad { [super viewDidLoad]; ...

  9. android高仿微信拍照、多选、预览、删除(去除相片)相冊功能

    先声明授人与鱼不如授人与渔,仅仅能提供一个思路,当然须要源代码的同学能够私下有偿问我要源代码:QQ:508181017 工作了将近三年时间了,一直没正儿八经的研究系统自带的相冊和拍照,这回来个高仿微信 ...

随机推荐

  1. 软工实践 - 第九次作业 Alpha 冲刺 （1 / 10）

    队名:起床一起肝活队 组长博客:https://www.cnblogs.com/dawnduck/p/9949350.html 作业博客:(班级博客本次作业的链接) 组员情况 组员1(队长):白晨曦 ...

  2. NSByteCountFormatter

    可以将字节转化为我们需要的Kb或者m + (NSString *)stringFromByteCount:(long long)byteCount countStyle:(NSByteCountFor ...

  3. iOS动画-扩散波纹效果

    最终效果 实现思路 动画的表现形式是颜色以及大小的变化,整体效果可以看做多个单独的波纹效果的叠加.因此我们可以创建多个CALayer,分别赋予CABasicAnimation动画,组成最终的动画效果. ...

  4. try 与catch的作用

    首先要清楚,如果没有try的话,出现异常会导致程序崩溃.而try则可以保证程序的正常运行下去,比如说: try{ int i = 1/0; }catch(Exception e){ e.printSt ...

  5. kubeadm安装k8s测试环境

    目标是搭建一个可测试的k8s环境,使用的工具 kubeadm, 最终一个master节点(非高可用),2个node节点. 环境以及版本 Centos7.3 kubeadm 1.11.1 kubelet ...

  6. swiper单屏滚动

    .swiper-slide { overflow: auto; } 1. 排除某些屏,不滚动 var startScroll, touchStart, touchCurrent; var aSlide ...

  7. Ionic2 调用自定义插件之研究

    cordova机制我在此就不提了,我们使用Typescript调用cordova plugin就如同调用第三方库是一个道理,那么这里就少不了书写declare文件,下面我就把几种封装调用的几种方式介绍 ...

  8. 基于SSM3框架FreeMarker自定义指令（标签）实现

    通过之前的Spring MVC 3.0.5+Spring 3.0.5+MyBatis3.0.4全注解实例详解系列文章,我们已经成功的整合到了一起,这次大象将在此基础上对框架中的FreeMarker模板 ...

  9. 【07】node 之 Buffer

    1.1.  Buffer基本概念 JavaScript 语言自身只有字符串数据类型,没有二进制数据类型.二进制可以存储电脑中任何数据(比如:一段文本.一张图片.一个硬盘,应该说电脑中所有的数据都是二进 ...

  10. ThreadPool怎样判断子线程全部执行完毕

    原文发布时间为:2010-10-27 -- 来源于本人的百度文章 [由搬家工具导入] 1、先来看看这个 http://hi.baidu.com/handboy/blog/item/160e9697fd ...