带有jQuery的图像幻灯片(也许使用PHP)

Question

好的，所以我在这里有我的div标签，它的css样式"background"设置为默认值。

例如

<div id="slideimage" style="background:url(01.jpg);width:xxpx;height:xxpx;"></div>

我有我的下一个按钮

<a href="#" onClick="nextPhoto()">Next</a>

所以我想在我点击下一步按钮时发生，#slideimage 的背景样式将变为 02.jpg。我尝试使用谷歌搜索，但似乎它无法正常运行。

就这样。提前谢谢。

Answer 1

jsBin demo

var images = [
  '01.jpg',
  '02.jpg',
  '03.jpg'
];
var iN = images.length;
var i = 0;
function changeImage(){
  $('#slideimage').css({background: 'url('+images[++i % iN]+')'});
}
$('#next').click( changeImage );

创建一个图像数组，一个var"索引计数器"(i(并获取数组中的图像数量(iN (

比你可以轻松地切换你的图像做这个数学使用模数：++i % iN

Answer 2

你有没有尝试过这个javascript：

function nextImage() {
  $('#slideimage').css("background", "url(02.jpg)");
}

这是一个稍微健壮的演示： http://jsfiddle.net/gQQBL/