<!DOCTYPE HTML>
<html> <head>
<meta charset="UTF-8">
<script src='jquery-1.6.1.js'></script>
</head> <style>
.border-img{border:8px solid #ccc;}
</style> <body> <div class='div-img'>
<img class='border-img' style='width:100px;height:60px;' src='1.jpg'/>
<img style='width:100px;height:60px;' src='2.jpg'/>
<img style='width:100px;height:60px;' src='3.jpg'/>
<img style='width:100px;height:60px;' src='4.jpg'/> </div> <div id="click"> <input id='prev' type='button' value="prev"/> <input id='next' type='button' value="next"/> </div> <script>
//版本号一 var imgLength=$(".div-img img").length; var point=0;
$("#prev").click(function(){ if(point<=0)
{
return false;
} point--;
$(".div-img img").removeClass('border-img');
$(".div-img img").eq(point).addClass('border-img'); }); $("#next").click(function(){ if(point>=imgLength-1)
{
return false;
} point++;
$(".div-img img").removeClass('border-img');
$(".div-img img").eq(point).addClass('border-img'); }); //版本号二 循环
/*
var imgLength=$(".div-img img").length; var point=0;
$("#prev").click(function(){ if(point<=0)
{
point=imgLength-1
}
else{ point--; } $(".div-img img").removeClass('border-img');
$(".div-img img").eq(point).addClass('border-img'); }); $("#next").click(function(){ if(point>=imgLength-1)
{
point=0;
} else
{
point++;
} $(".div-img img").removeClass('border-img');
$(".div-img img").eq(point).addClass('border-img'); });
*/ </script> </body>
</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. iis特殊后缀文件下载404

    项目中有特殊类型的文件上传到服务器,下载的时候报404,下载不下来.如后缀名为qwwq这种类型. 因为遇到过这种情况,以前都是配置mime类型好的,但是这次没有找到,到底应该配置什么mime类型,一时 ...

  2. Redhat/CentOS安装vsftp软件

    1.更新yum源 首先需要更新系统的yum源,便捷工具下载地址:http://help.aliyun.com/manual?spm=0.0.0.0.zJ3dBU&helpId=1692 2.安 ...

  3. idea下的hibernate反向生成插件

    阅读目录 1. 打开 DataBase 窗口,添加数据源 2. 添加 hibernate 持久层支持,生成实体 Bean /配置文件 谈起 Hibernate 应该得知道 Gavin King 大叔, ...

  4. 解决云服务器ECS,windows server 2012不能安装SQL Server 2012,不能安装.NET Fromework 3.5

    在云服务器上安装SQL Server 2012 时出现“启用windows功能NetFx3时出错”的问题:NetFx3指的是.NET Framework 3.5,SQL Server 2012数据库系 ...

  5. Log4j官方文档翻译(九、输出到数据库)

    log4j提供了org.apache.log4j.JDBCAppender对象,可以把日志输出到特定的数据库. 常用的属性: bufferSize 设置buffer的大小,默认是1 driver 设置 ...

  6. 【bzoj2127】happiness 最大流

    happiness Time Limit: 51 Sec  Memory Limit: 259 MBSubmit: 2579  Solved: 1245[Submit][Status][Discuss ...

  7. Databus架构分析与初步实践

    简介 Databus是一个低延迟.可靠的.支持事务的.保持一致性的数据变更抓取系统.由LinkedIn于2013年开源.Databus通过挖掘数据库日志的方式,将数据库变更实时.可靠的从数据库拉取出来 ...

  8. Safari 11.0 已发布,新特性都在这儿了!

    Safari 11.0 兼容性 Safari 11.0 可运行于 iOS 11.0 和 macOS 10.1版本的系统环境,同时在macOS 10.12.6 和 10.11.6版本中也可以使用. Hi ...

  9. CF 148D Bag of mice【概率DP】

    D. Bag of mice time limit per test 2 seconds memory limit per test 256 megabytes Promblem descriptio ...

  10. Struts2的使用注解配置Action(零配置)

    1.首先引入struts2注解的jar包:struts2-convention-plugin.jar ------------------------------第一种方式-------------- ...