java前进后退代码_查看图片(前进后退)功能实现js代码

注：images文件夹下图片的命名是从1~5.jpg有规律的

声明的 var array = [1, 2, 3, 4, 5]; 这个数组存放的是图片的名称

img

{

width: 200px;

height: 200px;

}

$(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');

}

})

})

#mydiv

{

position: absolute;

width: 500px;

height: 400px;

top: 50%;

left: 50%;

margin-top: -200px;

margin-left: -290px;

}

img

{

width: 480px;

height: 380px;

}

$(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');

}

})

})