Question

我有一个用于图片库的两个数组。我在顶部有一个导航，带有我想要的不同画廊的id。我想这样做，以便当单击其中一个链接时，它会加载相应的数组并在其中显示图像。我的代码看起来像这样： HTML：

<div id="gallery>
   <div id="slideshow-container">
      <img src="images/someimg.jpg" id="current-img" />
   </div>
</div>

jQuery的：

var gallery1 = ['images/img1.jpg', 'images/img2.jpg', 'images/img3.jpg'] 
var gallery2 = ['images/img4.jpg', 'images/img5.jpg', 'images/img6.jpg']

我正在使用this教程制作我的图片幻灯片，因为我想远离插件，这样我就可以更好地掌握jQuery的工作原理。所以我的jQuery的其余部分看起来很相似：

编辑：我已将click函数更改为@nullability建议的内容，但我不确定如何将索引传递给函数。我试图输入它，你将在每个函数中传递它，但在if if (i < index.length - 1){行我仍然得到索引未定义的错误。

$(document).ready(function(){

setInterval(advanceImage, 4000)

})

//Creates array variable based on what user clicks
$('.nav li a').click(function(e) {
    e.preventDefault();
    var index = $(this).data('index');
    changeImage(index);
    //alert(gallery);
});

//Creates a current image from array
function currentImage(){
    i = jQuery.inArray($('#current-img').attr('src'), index);
    return i;
}

//Cycles through array
function advanceImage(){
    currentImage();
    if (i < index.length - 1){
        changeImage(i + 1);
    }else{
        changeImage(0)
    }
}

//Change current image to whatever i gives it
function changeImage(i){
$('#current-img').stop().animate({
    opacity: 0,
}, 200, function(){
    $('#current-img').attr('src', index);
    $('#slideshow-container img').load(function(){
        $('#current-img').stop().animate({
            opacity: 1,
        }, 200)
    })
})
}

我可以通过手动选择阵列来显示和旋转图像：gallery[0,0]或gallery[0,1]但我不知道从哪里开始点击甚至读取点击链接的ID并创建一个我可以放入的变量。

编辑：我将其更改为两个单独的数组。我不能有这样的功能：

$('.nav li a').click(function() {
    var gallery = $(this).attr('id');
});

然后将gallery放入其他代码中，让它选择点击的内容？

Answer 1

听起来您的主要问题是导航按钮。您可能希望在链接上使用data属性而不是id属性。例如，如果您有标记：

<ul class="nav">
    <li><a href="#" class="button" data-index="1">Slide 1</a></li>
    <li><a href="#" class="button" data-index="2">Slide 2</a></li>
    <li><a href="#" class="button" data-index="3">Slide 3</a></li>
</ul>

您可以使用jQuery data functions访问index数据属性，并使用它来调用changeImage函数，如下所示：

$('.nav .button').click(function(e) {
    e.preventDefault();
    var index= $(this).data('index');
    changeImage(index);
});

请注意，我添加了e.preventDefault();来取消点击<a>标记的默认操作，以避免任何意外行为。

如果需要存储其他数组索引，则可以有多个data属性。例如，除了data-gallery之外，您还可以使用data-index。希望这会有所帮助。

数组选择

1 个答案: