Question

我正在构建一个静态页面，其中我有一个图像和2个箭头（一个在图像左侧，一个在右侧）。通过单击箭头，将出现另一个图像，就像在照片库中一样。总共只有4张图片，我会保存在计算机上的站点文件夹中。基本上，箭头应该允许用户通过按右箭头或左箭头在图像之间循环。

我有一系列图片：

var imageArray = new Array();
imageArray[0] = new Image(); imageArray[0].src = 'image1.png';
imageArray[1] = new Image(); imageArray[1].src = 'image2.png';
imageArray[2] = new Image(); imgArray[2].src = 'image3.png';
imageArray[3] = new Image(); imageArray[3].src = 'image4.png';

两个箭头：

<div id="apDiv1"style="display:none"><img src="arrow left.png" width="125" height="74" onClick="SOMETHING">/div>

<div id="apDiv2"style="display:none"><img src="arrow right.png" width="125" height="74" onClick="SOMETHING">/div

我想让onClick调用一个显示下一个（或上一个）图像的函数。

我该怎么做？我虽然有一种切换功能，但效果不佳。

另外，我可以设置一个起始图像，如：

<div id="apDiv3"style="display:none"><img src="image1.png" width="200" height="200">/div>

Answer 1

向前移动（向前点击）

<强>的CSS：

.show {
    display: block;
}

.hide {
    display: none;
}

现在，假设你有一个父div，所有图片div 就像这样

<div class='parent'>
    <div id='image-1' class='show'><img src="image1.png" width="200" height="200"></div>
    <div id='image-2' class='hide'><img src="image2.png" width="200" height="200"></div>
    <div id='image-3' class='hide'><img src="image3.png" width="200" height="200"></div>
    //and so on...
</div>

Javascript代码：

onclick: function() {
    var images = $('.parent').find('div');
    for(var i = 0; i< images.length; i++) {
        if($(images[i]).hasClass('show')) {
            $(images[i]).removeClass('show');
            $(images[i]).addClass('hide');
            if(i === images.length -1) {
                $(images[0]).removeClass('hide');
                $(images[0]).addClass('show');
            } else {
                $(images[0]).removeClass('show');
                $(images[0]).addClass('hide');
            }
        }
    }
}

同样，实施后退箭头点击

希望这有帮助

照片库的Javascript功能

1 个答案: