php - 使用 jQuery 的图像幻灯片（也许使用 PHP）

Question

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

例如

<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 演示

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 'index counter' ( i) 并获取数组中的图像数 ( iN)

比您可以使用 Modulo 轻松切换图像进行此数学运算：++i % iN

Answer 2

你试过这个javascript：

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

这是一个更强大的演示：http: //jsfiddle.net/gQQBL/