0

我想使用键盘和鼠标导航图像（单击左右箭头图像）。

我正在使用 Jquery 来执行此操作，但共享的 imgIndex 似乎与 .keydown 函数和 .click 函数无关...每当 .keydown 函数或 ++ imgIndex 时，不是也使用了更改的索引在点击功能？那么它们不应该总是在同一个索引上吗？

按键功能：

<script type="text/javascript">
var imgArray = [<?php echo implode(',', getImages($site)) ?>];

$(document).ready(function() {      

    var img = document.getElementById("showimg");
    img.src = imgArray[<?php echo $imgid ?>];
    var imgIndex = <?php echo $imgid ?>;
    alert(imgIndex);

    $(document).keydown(function (e) {
        var key = e.which;
        var rightarrow = 39;
        var leftarrow = 37;
        var random = 82;

        if (key == rightarrow) 
        {
            imgIndex++;
            if (imgIndex > imgArray.length-1) 
            {
                imgIndex = 0;

            }
            img.src = imgArray[imgIndex];
        }
        if (key == leftarrow) 
        {
            if (imgIndex == 0) 
            {
                imgIndex = imgArray.length;
            }

            img.src = imgArray[--imgIndex];
        }   
    });

点击功能：连接左右可点击图片

在此处输入图像描述

    $("#next").click(function() {
        imgIndex++;
            if (imgIndex > imgArray.length-1) 
            {
                imgIndex = 0;
            }
            img.src = imgArray[imgIndex];
    });
    $("#prev").click(function() {
        if (imgIndex == 0) 
            {
                imgIndex = imgArray.length;
            }           
            img.src = imgArray[--imgIndex];
    });
});

只是为了让您对 getImages php 函数有一些了解：

<?php
function  getImages($siteParam) {
include 'dbconnect.php';
if ($siteParam == 'artwork') { 
    $table = "artwork"; 
}       
else { 
    $table = "comics"; 
}   

$catResult = $mysqli->query("SELECT id, title, path, thumb, views, catidFK FROM $table");   
$img = array();
while($row = $catResult->fetch_assoc()) 
{
    $img[] = "'" . $row['path'] . "'";
}
return $img;
}
?>

非常感激！

脚本在“view image.php”上的快照

在此处输入图像描述

4

2 回答 2

1

我认为问题在于您将 imgIndex 定义为“就绪”处理程序中的局部变量，并尝试用作全局变量。在这种情况下，两个 prev/next 处理程序都将获得它们自己的 imgIndex 副本。

检查这个小提琴：http: //jsfiddle.net/BuddhiP/f2WzJ/

var imgArray = ['img1', 'img2', 'img3', 'img4', 'img5'];
var imgIndex = 3;

$(document).ready(function() {
    var $img = $("#imgIndex");
    $img.text(imgIndex);
    //alert(imgIndex);

    $(document).keydown(function(e) {
        var key = e.which;
        var rightarrow = 39;
        var leftarrow = 37;
        var random = 82;

        if (key == rightarrow) {
            imgIndex++;
            if (imgIndex > imgArray.length - 1) {
                imgIndex = 0;

            }
            //img.src = imgArray[imgIndex];
             $img.text(imgIndex);
        }
        if (key == leftarrow) {
            if (imgIndex == 0) {
                imgIndex = imgArray.length;
            }

            //img.src = imgArray[--imgIndex];
            $img.text(--imgIndex);
        }
    });

    $("#next").click(function() {
        imgIndex++;
        if (imgIndex > imgArray.length - 1) {
            imgIndex = 0;
        }
        $img.text(imgIndex);
        //img.src = imgArray[imgIndex];
    });
    $("#prev").click(function() {
        if (imgIndex == 0) {
            imgIndex = imgArray.length;
        }
        $img.text(--imgIndex);
        //img.src = imgArray[--imgIndex];
    });
});​
于 2012-11-21T03:40:45.367 回答
0

如果您对点击和按键的处理方式不同

$(document).ready(...)

块，那么变量将不会被共享。这是因为该块中的代码被视为匿名函数，并且您在其中声明的任何变量都将被提取到该块中。

于 2012-11-21T03:31:53.663 回答