Question

您好我有点问题，因为我已经建立了一个画廊，在这个画廊中有画廊，这就是我的意思：

<div class="galleries">
<div class="gallery1"><img src="" /></div>
<div class="gallery2"><img src="" /></div>
<div class="gallery3"><img src="" /></div>
<div class="gallery4"><img src="" /></div>
<div class="gallery5"><img src="" /></div>
<div class="gallery6"><img src="" /></div>
</div>

我循环了他们，我的意思是，如果结束第1，那么我做gallery2（）;等等。但是我想在它们之间添加箭头来移动它们，但是我不知道如何实现这一点，有人可以帮助我实现这个目标吗？

Answer 1

一个非常基本的方法是为画廊之间的导航创建一些东西，比如锚点，按钮或任何你想要的东西：

<a class="prev"> < </a> 
<a class="next"> > </a>

然后你可以使用css类来管理活动 / 隐藏画廊

<div id="gallery1" class="active">Gallery 1<img src="" /></div>
<div id="gallery2" class="hidden">Gallery 2<img src="" /></div>
<div id="gallery3" class="hidden">Gallery 3<img src="" /></div>
<div id="gallery4" class="hidden">Gallery 4<img src="" /></div>
<div id="gallery5" class="hidden">Gallery 5<img src="" /></div>
<div id="gallery6" class="hidden">Gallery 6<img src="" /></div>

Css应该是：

.active{
    display: block;
}
.hidden{
    display: none;
}

最后使用jQuery：

$('.next').on('click', function(){
    if(! $('.galleries .active').is($('.galleries div').last()) ){
    $('.galleries .active')
        .removeClass("active")
        .addClass("hidden")
        .next()
        .removeClass("hidden")
        .addClass("active");
    }
});

$('.prev').on('click', function(){
    if(! $('.galleries .active').is($('.galleries div').first()) ){
        $('.galleries .active')
            .removeClass("active")
            .addClass("hidden")
            .prev()
            .removeClass("hidden")
            .addClass("active");
    }
});

此处完整演示：JSFiddle

编辑：如果您需要根据活动图库调用不同的功能，假设功能名称等同于您的图库ID （就像您的示例中一样），您可以添加以下行在两个函数中（next和prev）：

eval($('.galleries .active').attr("id")+"()");

新演示：JSFiddle

请注意，这种方法完全没有被重新考虑。可能更好的方法是调用一个包装函数来检查ID，然后调用相关函数，如下所示：

loadFunctionGalleryFromID( $('.galleries .active').attr("id") );

...

function loadFunctionGalleryFromID(id){
    switch(id) {
        case "gallery1":
            gallery1();
            break;
        case "gallery2":
            gallery2();
            break;
        case "gallery3":
            gallery3();
            break;

            .......
      }
}

JSFiddle

在画廊之间移动

1 个答案: