Javascript 需要用js/php gallery向正确的方向推动吗

我正在尝试创建一个图像库。大部分都按预期工作，但是，我想在此图库中更改的是，当我单击下一张图片或上一张图片时，我希望缩略图显示下8张图片。目前正在播放下一张图片

PHP代码：

<?php
$pics = glob("img/2016/*/*.{JPG,PNG,GIF,jpg,png,gif}", GLOB_BRACE);
if(count($pics)) {
    rsort($pics);
    foreach($pics as $pictures) {
        echo "<a href='$pictures' target='_blank'><img class='Gallery' src='$pictures'></a>";
    }
    echo '<a class="button-floating lbutton" onclick="plusDivs(-1);plusThumbs(-1)"><div class="gall_nav">&#10094;</div></a>';
    echo '<a class="button-floating rbutton" onclick="plusDivs(1);plusThumbs(1)"><div class="gall_nav">&#10095;</div></a>';
    echo '</div>';
    echo '<div class="thumbs_container">';
    foreach(array_slice($pics, 1) as $thumbs)
        if ($thumb++ < 8){
            echo "<a href='$thumbs' target='_blank'><img class='thumbs' src='$thumbs'></a>";
        }
    } else {
        echo "Sorry, no images to display!";
    }
    ?>

---

我希望，我理解了你的想法和你想做的事。无论如何，这是我的建议。首先我想说，使用
php
构建
html
标记甚至不是一个好主意。分离代码总是一种更好的方法，而不是进行某种混合。因此，我建议您仅使用
php
脚本来查找所有图像并向客户端发送src数组（采用
JSON
格式）。当您获得一个src数组时，您可以仅使用
javascript
或
jQuery
创建一个库。使用jQuery，您可以发出一个简单的
GET
Ajax请求，以获取img的src数组。然后你就可以进入你的画廊了

您可以通过以下方式制作图库：

因此，您可以通过单击
prev
或
next
按钮更改id。单击后，重新生成当前图像和拇指容器

以下是工作示例（
jQuery
）：



测试应用程序
上
下一个
$（文档）.ready（函数（）{
var fakeSrc=
['src1'，'src2'，'src3'，'src4'，'src5'，'src6'，'src7'，'src8'，'src9'，'src10'，'src11']；
var-cId=0；
var thumbs_wrapper=$（'.thumbs_wrapper'）；
var curr_image=$（'.curr_image'）；
var-prev=$（'.prev'）；
var next=$（'.next'）；
var updateThumbs=函数（）{
var max=（（cId+9）>fakeSrc.length）？fakeSrc.length:cId+9；
thumbs_wrapper.html（“”）；
对于（变量i=cId+1；ifakeSrc.length-1）cId=fakeSrc.length-1；
UpdateGallery（）；
});
UpdateGallery（）；
});
wow！谢谢你，唯一的问题是我没有真正理解那些代码的功能，但我想我最终会弄明白的：）无论如何，再次感谢你的努力，我会尝试把它弄得乱七八糟，以了解所有的功能，等等：）没问题！如果您有任何问题，我随时准备帮助您。：）不用担心，m8但是非常感谢：）我只是不想使用别人写的任何东西而不理解：）我想我会参加一些关于jquery的在线速成课程。。。现在拖得太久了：P
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("Gallery");
    if (n > x.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = x.length} ;
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none"; 
    }
    x[slideIndex-1].style.display = "block"; 

var thumbIndex = slideIndex +1;
showThumbs(thumbIndex);

function plusThumbs(t){
showThumbs(thumbIndex += t);
}

function showThumbs(t){
    var g;
    var getThumb = document.getElementsByClassName("thumbs");
    if (t > getThumb.length) {thumbIndex = 1}
    if (t < 1) {thumbIndex = getThumb.length};
    for (g = 0; g < getThumb.length; g++){
        getThumb[g].style.display = "none";
    }
getThumb[thumbIndex-1].style.display = "block";
}
}