Question

所以基本上我在jQuery中有一个库脚本。当用户点击缩略图图像时，图像属性src随后被传送到主库img元素。但是我现在希望用户能够单击下一个/上一个按钮并遍历文件夹中的所有图像。我将它们全部命名为img0.jpg，img1.jpg等等。我想我可以通过“attr（）”和“slice（）”简单地获取当前img src，然后使用变量增加img'0'，img'1'等中的数字。继承我的代码。我希望你们能理解！

$("#next").click(function () {
   var i = 0;
   var sliceImg = $("#gallerycover").attr("src").slice('0', String.length - 5);
   $("#gallerycover").attr("src", sliceImg + i++ +."jpg");
});

<div id="gallerycontainer">
  <img id="gallery" src="" />
</div>

<div id="thumbcontainer">
  <div id="box4"><img class="thumb" src="" /></div>
</div>

Answer 1

尝试替换以下代码：

var sliceImg = $("#gallerycover").attr("src").slice('0', String.length - 5);
$("#gallerycover").attr("src", sliceImg + i++ +."jpg");

这个：

var src = $("#gallerycover").attr("src");
var idx = src.indexOf('img');
var sliceImg = src.slice(idx+3, src.length - 4);
$("#gallerycover").attr("src", (parseInt(sliceImg, 10) + 1) + ".jpg");

请参阅working demo

Answer 2

你可以使用正则表达式来分割你的图像源字符串，或者你可以让你的滑块更好地跟踪单个幻灯片，方法是在缩略图中添加一个属性，你的下一个/上一个函数可以检查和增加，而不必解析字符串（将来可能会改变）。

Answer 3

var myInt = 0;
var myInt++;

var sliceImg = $("#gallerycover").attr("src").replace(/\d+/, myInt);

$("#gallerycover").attr("src", sliceImg);

如何切片String对象并在jQuery中返回新值？

3 个答案: