查看圖片(前進后退)功能實現js代碼

2019-11-20 22:46:36

字體：大中小

來源：轉載

供稿：網友

注：images文件夾下圖片的命名是從1~5.jpg有規律的
聲明的 var array = [1, 2, 3, 4, 5]; 這個數組存放的是圖片的名稱

 
<head> 
<title></title> 
<script src="Jquery1.7.js" type="text/javascript"></script> 
<style type="text/css"> 
img 
{ 
width: 200px; 
height: 200px; 
} 
</style> 
<script type="text/javascript"> 
$(function () { 
var array = [1, 2, 3, 4, 5]; 
var count = 0; 
$('#Button1').click(function () { 
if (count > 0) { 
count--; 
$('img').attr('src','images/'+array[count]+'.jpg'); 
} 
}) 
$('#Button2').click(function () { 
if (count <4) { 
count++; 
$('img').attr('src', 'images/' + array[count] + '.jpg'); 
} 
}) 
}) 
</script> 
</head> 
<body> 
<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> 
</body> 

復制代碼代碼如下:

 
<!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="Jquery1.7.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
//第一種方法 
/* 
$('#btn1').toggle(function () { $('img').attr('src', 'images/1.jpg'); }, 
function () { $('img').attr('src', 'images/2.jpg'); }, 
function () { $('img').attr('src', 'images/3.jpg'); }, 
function () { $('img').attr('src', 'images/4.jpg'); }, 
function () { $('img').attr('src', 'images/5.jpg'); }); 

$('#btn2').toggle(function () { $('img').attr('src', 'images/5.jpg'); }, 
function () { $('img').attr('src', 'images/4.jpg'); }, 
function () { $('img').attr('src', 'images/3.jpg'); }, 
function () { $('img').attr('src', 'images/2.jpg'); }, 
function () { $('img').attr('src', 'images/1.jpg'); }); 
*/ 

//第二種方法 

var array = [1, 2, 3, 4, 5, 6]; 
var count = 0; 
//后退 
$('#btn1').click(function () { 
if (count > 0) { 
count--; 
$('img').attr('src', 'images/' + array[count] + '.jpg'); 
} 
}) 
//前進 
$('#btn2').click(function () { 
if (count < 5) { 
count++; 
$('img').attr('src', 'images/' + array[count] + '.jpg'); 
} 
}) 

}) 
</script> 
</head> 
<body> 
<div id="mydiv"> 
<table> 
<tr> 
<td> 
<input id="btn1" type="button" value="<" /> 
</td> 
<td> 
<img src="images/1.jpg" /> 
</td> 
<td> 
<input id="btn2" type="button" value=">" /> 
</td> 
</tr> 
</table> 
</div> 
</body> 
</html> 