快捷導(dǎo)航

基于jQuery實現(xiàn)圖片的前進與后退功能

更新時間：2013年04月24日 16:09:44 作者：

前進與后退在瀏覽網(wǎng)頁的時候是比較常見的而且非常的實用，接下來為大家分享下使用jQuery實現(xiàn)圖片的前進與后退，感興趣的朋友可以參考下哈

 
<!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> 

效果如下：

您可能感興趣的文章:

相關(guān)文章

淺析jQuery Mobile的初始化事件
這篇文章主要介紹了淺析jQuery Mobile的初始化事件,jQuery是當前人氣最高的JavaScript庫,需要的朋友可以參考下
2015-12-12
jquery中通過父級查找進行定位示例
如果想要查找到有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的幾個小變化
這篇文章主要介紹了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 和 $.getJson
2011-01-01
jquery圖片上下tab切換效果
圖片上下切換效果,學(xué)習(xí)jquery的朋友可以參考下。
2011-03-03