Question

在我的代码中，我有三个图像，当点击每个图像时，将打开一个模态框，该框将具有通过单击右箭头（下一个），左箭头（上一个）显示所有图像的功能。

我做了所有基本的事情，但我面临两个问题：

当在最后一张图像上点击下一个按钮时，它会显示空白，在第一个图像时间使用上一个按钮也会发生同样的情况。
当我在页面上点击任何图像时，它会每次打开带有第一张图像的模态，当模态打开时，如何使用我点击过的特定图像打开模式。

这是我的JavaScript代码：

//next prev images
//active image setting
$('.image_post li:first').addClass('activepostimg');
//code for next image  
$('.buttons_next').on('click', function() {
    $('.image_post li.activepostimg').index() + parseInt(1) !== $('.image_post li').length ; 
    $('.activepostimg').removeClass('activepostimg').next('.image_post li').addClass('activepostimg');  
});
//code for previous
$('.buttons_prev').on('click', function() {
    $('.image_post li.activepostimg').index() + parseInt(1) !== $('.image_post li').length ; 
    $('.activepostimg').removeClass('activepostimg').prev('.image_post li').addClass('activepostimg');
});
//Image counter
var totalItems = $('.image_post li').length;
var currentIndex = $('.activepostimg').index() + 1;
$('.slide_image_counter a').html(''+currentIndex+'/'+totalItems+'');
//for next

Code on Jsfiddle

Answer 1

替换所有js代码并从html中删除class="activepostimg"。这是DEMO

确保图像在缩放时的顺序不同。

var totalItems = $('.image_post li').length, currentIndex = 1;
$('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');

//code for opening image
$('.grid img').on('click', function() {
    currentIndex = $('.grid img').index(this) + 1;
    $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
    $(".image_post li").removeClass("activepostimg");
    $('.image_post li').eq(currentIndex - 1).addClass('activepostimg')
});

//code for next image  
$('.buttons_next').on('click', function() {
    if($('.image_post li.activepostimg').index() < ($('.image_post li').length - 1)){
        currentIndex++;
        $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
        $('.activepostimg').removeClass('activepostimg').next('.image_post li').addClass('activepostimg');  
    } else {
        currentIndex = 1;
        $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
        $(".image_post li").removeClass("activepostimg");
        $('.image_post li').eq(currentIndex - 1).addClass('activepostimg')
    }
});

//code for previous
$('.buttons_prev').on('click', function() {
    if ($('.image_post li.activepostimg').index() > 0) {
            currentIndex--;
        $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
        $('.activepostimg').removeClass('activepostimg').prev('.image_post li').addClass('activepostimg');
    } else {
        currentIndex = $('.image_post li').length;
        $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
        $(".image_post li").removeClass("activepostimg");
        $('.image_post li').eq(currentIndex - 1).addClass('activepostimg')
    }
});

灯箱图像滑块未单击，滑块未正确循环

1 个答案: