基于jQuery实现图片的前进与后退功能
更新时间：2013年04月24日 16:09:44 作者：
前进与后退在浏览网页的时候是比较常见的而且非常的实用，接下来为大家分享下使用jQuery实现图片的前进与后退，感兴趣的朋友可以参考下哈
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#mydiv{ position:absolute; width:500px; height:400px; top:50%; left:50%; margin-top:-200px; margin-left:-290px; }
img{ width:480px; height:380px;}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var array = [1, 2, 3, 4, 5, 6];
var count = 0;
//后退
$('#Button1').click(function () {
if (count > 0) {
count--;
$('img').attr('src', 'images/' + array[count] + '.jpg');
}
})
//前进
$('#Button2').click(function () {
if (count < 5) {
count++;
$('img').attr('src', 'images/' + array[count] + '.jpg');
}
})
})
</script>
</head>
<body>
<div id="mydiv">
<table><tr><td><input id="Button1" type="button" value="<" /></td><td><img src="images/1.jpg" /></td><td><input id="Button2" type="button" value=">" /></td></tr></table>
</div>
</body>
</html>
效果如下：
相关文章
这篇文章主要介绍了浅析jQuery Mobile的初始化事件,jQuery是当前人气最高的JavaScript库,需要的朋友可以参考下2015-12-12
如果想要查找到有icon这个class的span除了用原始的代码还可以用父级查询的方法进行定位，具体的实现如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-06-06
目前jQuery有1.x和2.x两个主要版本，区别在于2.x移除了对古老的IE 6、7、8的支持，因此2.x的代码更精简。选择哪个版本主要取决于你是否想支持IE 6~8，下文给大分享jquery 简介的相关知识，感兴趣的朋友一起看看吧2017-07-07
这篇文章主要介绍了jQuery1.8中的几个小变化。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
本文将介绍下用Jquery重写windows.alert方法，已经在 IE8 , firefox3.0.11下面测试通过，喜欢的朋友可以放心使用2013-04-04
下面小编就为大家带来一篇Mui使用jquery并且使用点击跳转新窗口的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如$("#img").attr("src","test.jpg"); 这里的$("#img")就是jQuery对象；2010-03-03
这篇文章给大家演示了如何利用Jquery队列实现输入不同的数量就显示不同的动画效果，文中给出了实例，让大家更容易理解，有需要的可以参考借鉴。2016-09-09
Jquery跨域获得Json时invalid label错误的解决办法
这两天用 Jquery 跨域取数据的时候，经常碰到 invalid label 这个错误，十分的郁闷，老是取不到服务器端发送回来的 json 值，一般跨域用到的两个方法为：$.ajax 和 $.getJson2011-01-01
图片上下切换效果,学习jquery的朋友可以参考下。2011-03-03
最新评论