0

我有一个漫画网站,它遍历数据库中的所有图像并将它们显示为缩略图。用户可以单击其中一张图像,在 viewComic.php 模板上以正常大小查看它。

我想让用户按左右箭头来导航图像。

所以,我的想法是:

  1. pagination.php 通过遍历数据库结果数组来处理正确页面上的图像显示(通过偏移)。用户可以单击结果(如下)以转到 viewcomic.php 模板上的特定图像。

    '<br />IMG: <a href="./templates/viewcomic.php?id=' . $row['imgid'] . '&image=' . $imgpath.$row['imgname'] . '">
    
  2. 现在在 viewcomic.php 上,我获取并显示图像

    $imgid = $_GET['id']; 
    $imgpath = $_GET['image']; 
    <center><img src=".<?php echo  $imgpath  ?>" /></center>
    

用户可以按左右箭头来浏览图像...

问题 1:Javascript 是否允许您手动设置数组中的索引位置?

由于我想让用户获取下一张和最后一张图像,我希望他们从他们当前所在的图像(他们在 pagination.php 中单击的图像)开始,而不是从图像数组的开头。我在 URL 中传递了 $imgid,所以我要设置 javascript img 数组索引 == $imgid,这将允许用户从他们离开的地方继续滚动浏览图像。

问题2:如何保持数组的当前索引?

当我想去某个方向时,它工作得很好。但如果我想改变方向,我必须按两次键。我发现这是因为在(imgIndex++)我按下了键之后索引增加了。意思是,当它开始走相反的方向时,它首先需要递减以将索引返回到当前图像,然后再次按键以最终显示下一个图像。我不知道如何解决这个问题。使用 ++imgIndex 也是有问题的,因为它会向前跳过图像。

<?php
 getImages() {
//DB connection code omitted
   $img = array();
   while($row = $catResult->fetch_assoc()) {
       $img[] = "'../images/all_comics/" . $row['imgname'] . "'";
}
return $img;
?>

var imgArray = [<?php echo implode(',', getImages()) ?>];
$(document).ready(function() {
    var img = document.getElementById("theImage");
    img.src = imgArray[0];
    var imgIndex = 0;

    $(document).keydown(function (e) 
    {
        //next image
        if (e.which == 39) 
        {
            if (imgIndex == imgArray.length) 
            {
                imgIndex = 0;
            }
            img.src = imgArray[imgIndex++];
                    //now the index is ahead by 1, which is bad if you want to press <-- to get the last image because the index is ahead by 1.
        }

        //last image
        if (e.which == 37) 
        {
            if (imgIndex == 0) 
            {
                imgIndex = imgArray.length;
            }
            img.src = imgArray[--imgIndex];
        }
    });
}); 

有任何想法吗?

非常感激!

4

1 回答 1

1

更改操作顺序:

if (e.which == 39) {
    imgIndex++;            
    if (imgIndex>imgArray.length)  {
        imgIndex = 0;
    }
    img.src = imgArray[imgIndex];                
}
于 2012-10-15T20:26:13.293 回答