基于jQuery實現(xiàn)圖片的前進與后退功能
更新時間：2013年04月24日 16:09:44 作者：
前進與后退在瀏覽網(wǎng)頁的時候是比較常見的而且非常的實用，接下來為大家分享下使用jQuery實現(xiàn)圖片的前進與后退，感興趣的朋友可以參考下哈
復(fù)制代碼 代碼如下:
<!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禁用鍵盤后退屏蔽F5刷新及禁用右鍵單擊
- 基于Jquery.history解決ajax的前進后退問題
- jquery判斷瀏覽器后退時候彈出消息的方法
- 如何讓瀏覽器支持jquery ajax load 前進、后退功能
- JQuery防止退格鍵網(wǎng)頁后退的實現(xiàn)代碼
- 基于Jquery 解決Ajax請求的頁面 瀏覽器后退前進功能，頁面刷新功能實效問題
- jquery右下角彈出提示框示例代碼
- Jquery實現(xiàn)鼠標移上彈出提示框、移出消失思路及代碼
- 基于jquery的彈出提示框始終處于窗口的居中位置（類似于alert彈出框的效果）
- jQuery實現(xiàn)頁面點擊后退彈出提示框的方法
相關(guān)文章
這篇文章主要介紹了淺析jQuery Mobile的初始化事件,jQuery是當前人氣最高的JavaScript庫,需要的朋友可以參考下2015-12-12
如果想要查找到有icon這個class的span除了用原始的代碼還可以用父級查詢的方法進行定位，具體的實現(xiàn)如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-06-06
jQuery簡介_動力節(jié)點Java學(xué)院整理
目前jQuery有1.x和2.x兩個主要版本，區(qū)別在于2.x移除了對古老的IE 6、7、8的支持，因此2.x的代碼更精簡。選擇哪個版本主要取決于你是否想支持IE 6~8，下文給大分享jquery 簡介的相關(guān)知識，感興趣的朋友一起看看吧2017-07-07
這篇文章主要介紹了jQuery1.8中的幾個小變化。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
用Jquery重寫windows.alert方法實現(xiàn)思路
本文將介紹下用Jquery重寫windows.alert方法，已經(jīng)在 IE8 , firefox3.0.11下面測試通過，喜歡的朋友可以放心使用2013-04-04
Mui使用jquery并且使用點擊跳轉(zhuǎn)新窗口的實例
下面小編就為大家?guī)硪黄狹ui使用jquery并且使用點擊跳轉(zhuǎn)新窗口的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
jQuery對象和DOM對象的相互轉(zhuǎn)化實現(xiàn)代碼
jQuery對象就是通過jQuery包裝DOM對象后產(chǎn)生的對象。jQuery對象是jQuery獨有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如$("#img").attr("src","test.jpg"); 這里的$("#img")就是jQuery對象；2010-03-03
利用Jquery隊列實現(xiàn)根據(jù)輸入數(shù)量顯示的動畫
這篇文章給大家演示了如何利用Jquery隊列實現(xiàn)輸入不同的數(shù)量就顯示不同的動畫效果，文中給出了實例，讓大家更容易理解，有需要的可以參考借鑒。2016-09-09
Jquery跨域獲得Json時invalid label錯誤的解決辦法
這兩天用 Jquery 跨域取數(shù)據(jù)的時候，經(jīng)常碰到 invalid label 這個錯誤，十分的郁悶，老是取不到服務(wù)器端發(fā)送回來的 json 值，一般跨域用到的兩個方法為：$.ajax 和 $.getJson2011-01-01
圖片上下切換效果,學(xué)習(xí)jquery的朋友可以參考下。2011-03-03