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];
    });
});

getImagesphp関数をある程度可視化できるようにするためです。

<?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;
}
?>

とても有難い！

スクリプトが「viewimage.php」にある場所のスナップショット

ここに画像の説明を入力してください

4

2 に答える 2

1

問題は、imgIndexを「ready」ハンドラー内のローカル変数として定義し、グローバルとして使用しようとしていることだと思います。この場合、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 に答える