jquery相冊图片来回选择
<!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相冊图片来回选择的更多相关文章
- Android之本地相冊图片选取和拍照以及图片剪辑
转载请注明出处:http://blog.csdn.net/loveyaozu/article/details/51160482 相信有非常多Android开发者在日常开发中,因为项目需求,须要我们的A ...
- Android调用相机实现拍照并裁剪图片,调用手机中的相冊图片并裁剪图片
在 Android应用中,非常多时候我们须要实现上传图片,或者直接调用手机上的拍照功能拍照处理然后直接显示并上传功能,以下将讲述调用相机拍照处理图片然后显示和调用手机相冊中的图片处理然后显示的功能,要 ...
- Android实现批量照片上传至server,拍照或者从相冊选择
近期因为项目需求,须要完毕批量照片上传,折腾了一段时间,最终完毕了,达到了例如以下效果 主界面主要有GridView组成和button组成,当按下一个格点时,会调用相机或者相冊,拍照或者选择相冊照片, ...
- android开发——从相冊中选择图片不裁剪
转载请注明出处:http://blog.csdn.net/zhoubin1992/article/details/46864777 问题: 在郭神的第一行代码中,第8章的从相冊中选择图片这块,从相冊选 ...
- Android上传图片之调用系统拍照和从相冊选择图片
Android上传图片之调用系统拍照和从相冊选择图片 本篇文章已授权微信公众号 guolin_blog (郭霖)独家公布 前言: 万丈高楼平底起,万事起于微末.不知不觉距离上篇博文已近四个月,2015 ...
- Qt 打开安卓相冊选择图片并获取图片的本地路径
Qt 打开安卓相冊选择图片并获取图片的本地路径 过程例如以下: 通过 Intent 打开安卓的系统相冊. 推荐使用 QAndroidJniObject::getStaticObjectField 获取 ...
- 最蛋疼的bug:读取图片缩略图(一定要在相冊查看下形成缓存)
近期的一个连接服务端的应用.须要读取图片,一般供用户公布商品选择上传图片.初始的图片列表应该是缩略图.仅仅有确定了,才上传原图,OK不多说上代码 package edu.buaa.erhuo; imp ...
- iOS图片加水印效果的实现并保存至相冊
图片加水印效果的实现并保存至相冊 实现效果如图: project下载:githubproject下载链接 代码: - (void)viewDidLoad { [super viewDidLoad]; ...
- android高仿微信拍照、多选、预览、删除(去除相片)相冊功能
先声明授人与鱼不如授人与渔,仅仅能提供一个思路,当然须要源代码的同学能够私下有偿问我要源代码:QQ:508181017 工作了将近三年时间了,一直没正儿八经的研究系统自带的相冊和拍照,这回来个高仿微信 ...
随机推荐
- selenium webdriver——元素操作
#Author:xiaoxiao from selenium import webdriver import time def abcd(): driver = webdriver.Firefox() ...
- 论文笔记(一)Re-ranking by Multi-feature Fusion with Diffusion for Image Retrieval
0x00 预备知识 $\DeclareMathOperator{\vol}{vol}$ 无向图上的随机游走 无向图 $G=(V,E)$,边权函数 $w\colon V\times V \to R_+$ ...
- Google Code Jam 2008 Round 1A C Numbers(矩阵快速幂+化简方程,好题)
Problem C. Numbers This contest is open for practice. You can try every problem as many times as you ...
- [AHOI2014&&JSOI2014][bzoj3876] 支线剧情 [上下界费用流]
题面 传送门 思路 转化模型:给一张有向无环图,每次你可以选择一条路径走,花费的时间为路径上边权的总和,问要使所有边都被走至少一遍(可以重复),至少需要花费多久 走至少一遍,等价于覆盖这条边 也就是说 ...
- [canvas入坑3] 类似ps中魔术棒或者画图中油漆桶的功能
查看效果请到 http://philippica.github.io/ 点击fill 这功能其实实现很low,最早高一看黑书的时候看到了floodfill算法感觉好神奇,转念一想这不就是bfs么!! ...
- JavaScript 笔记(2) -- 类型转换 & 正则表达 & 变量提升 & 表单验证
目录: typeof, null, undefined, valueOf() 类型转换 正则表达式 错误: try, catch, throw 调试工具 变量提升 strict 严格模式 使用误区 ...
- nodeJS学习(10) --- 事件模块
转载:http://www.cnblogs.com/zhongweiv/p/nodejs_events.html 目录 简介及资料 事件常用函数及使用 emitter.on(event, listen ...
- 在react项目当中使用redux
如果需要在你的react项目当中使用状态管理模式的话,需要引入redux和react-redux两个插件,redux提供基本的功能,react-redux提供将redux注入react的方法. imp ...
- 【UVA10561】Treblecross(SG函数)
题意:有n个格子排成一行,其中一些格子里面有字符X.两个游戏者轮流操作,每次可以选一个空格,在里面放上字符X. 如果此时有3个连续的X出现,则该游戏者赢得比赛.初始条件下不会有3个X连续出现. 判断先 ...
- mysql-count与sum
参考:https://www.jb51.net/article/141238.htm 建立时间临时辅助表:https://blog.csdn.net/qq_36226453/article/detai ...