1

我有一些代码允许您在灯箱中的全尺寸图像之间来回滚动。它只是在按下某个键时替换图像的来源。它在 Firefox 中完美运行，但在 IE、Chrome 和 Safari（我测试过的唯一其他浏览器）中似乎没有任何作用。

任何帮助将不胜感激！

$(document).ready(function() {

var thisImage = 1;
var maxImage = $('div#myImageFlow_images > img').length;

function handleArrowKeys(evt) {
  switch (evt.keyCode) {
    case 37:
      $(function() {
        if ($('img.highslide-image').attr('src') == 'images/1.jpg') {
        thisImage = 1;
        } else if ($('img.highslide-image').attr('src') == 'images/2.jpg') {
        thisImage = 2;
        } else if ($('img.highslide-image').attr('src') == 'images/3.jpg') {
        thisImage = 3;
        } else if ($('img.highslide-image').attr('src') == 'images/4.jpg') {
        thisImage = 4;
        } else if ($('img.highslide-image').attr('src') == 'images/5.jpg') {
        thisImage = 5;
        } else if ($('img.highslide-image').attr('src') == 'images/6.jpg') {
        thisImage = 6;
        } else if ($('img.highslide-image').attr('src') == 'images/7.jpg') {
        thisImage = 7;
        } else if ($('img.highslide-image').attr('src') == 'images/8.jpg') {
        thisImage = 8;
        } else if ($('img.highslide-image').attr('src') == 'images/9.jpg') {
        thisImage = 9;
        } else if ($('img.highslide-image').attr('src') == 'images/10.jpg') {
        thisImage = 10;
        } else if ($('img.highslide-image').attr('src') == 'images/11.jpg') {
        thisImage = 11;
        } else if ($('img.highslide-image').attr('src') == 'images/12.jpg') {
        thisImage = 12;
        } else if ($('img.highslide-image').attr('src') == 'images/13.jpg') {
        thisImage = 13;
        }
      });
      $(function() {
        if (thisImage == 1) {
          thisImage = 1;
          } else {
          thisImage--;
        }

      });

      $('img.highslide-image').attr({ src: 'images/' + thisImage + '.jpg' });

      var theTitle = $('div#myImageFlow_caption').text();

      $('div.highslide-caption').html(theTitle);

      break;       
    case 39:
      $(function() {
        if ($('img.highslide-image').attr('src') == 'images/1.jpg') {
        thisImage = 1;
        } else if ($('img.highslide-image').attr('src') == 'images/2.jpg') {
        thisImage = 2;
        } else if ($('img.highslide-image').attr('src') == 'images/3.jpg') {
        thisImage = 3;
        } else if ($('img.highslide-image').attr('src') == 'images/4.jpg') {
        thisImage = 4;
        } else if ($('img.highslide-image').attr('src') == 'images/5.jpg') {
        thisImage = 5;
        } else if ($('img.highslide-image').attr('src') == 'images/6.jpg') {
        thisImage = 6;
        } else if ($('img.highslide-image').attr('src') == 'images/7.jpg') {
        thisImage = 7;
        } else if ($('img.highslide-image').attr('src') == 'images/8.jpg') {
        thisImage = 8;
        } else if ($('img.highslide-image').attr('src') == 'images/9.jpg') {
        thisImage = 9;
        } else if ($('img.highslide-image').attr('src') == 'images/10.jpg') {
        thisImage = 10;
        } else if ($('img.highslide-image').attr('src') == 'images/11.jpg') {
        thisImage = 11;
        } else if ($('img.highslide-image').attr('src') == 'images/12.jpg') {
        thisImage = 12;
        } else if ($('img.highslide-image').attr('src') == 'images/13.jpg') {
        thisImage = 13;
        }
      });
      $(function() {
        if (thisImage == maxImage) {
          // Do Nothing....
          } else {
          thisImage++;
        }
      });

      $('img.highslide-image').attr({ src: 'images/' + thisImage + '.jpg' });

      var theTitle = $('div#myImageFlow_caption').text();

      $('div.highslide-caption').html(theTitle);
      break;  
  }
}

document.onkeypress = handleArrowKeys;

});
4

2 回答 2

6

它与浏览器之间使用的不同事件模型有关。

这一行：

document.onkeypress = handleArrowKeys;

并且 keyCode 属性不是跨浏览器兼容的。

既然您似乎正在使用 jQuery，为什么不像这样使用他们的keypress 事件：

$(document).ready(function() {

var thisImage = 1;
var maxImage = $('div#myImageFlow_images > img').length;

    $("body").keypress(function(evt) {
        switch (evt.which) {
                case 37:
                        $(function() {
                                if ($('img.highslide-image').attr('src') == 'images/1.jpg') {
                                thisImage = 1;
                                } else if ($('img.highslide-image').attr('src') == 'images/2.jpg') {
                                thisImage = 2;
                                } else if ($('img.highslide-image').attr('src') == 'images/3.jpg') {
                                thisImage = 3;
                                } else if ($('img.highslide-image').attr('src') == 'images/4.jpg') {
                                thisImage = 4;
                                } else if ($('img.highslide-image').attr('src') == 'images/5.jpg') {
                                thisImage = 5;
                                } else if ($('img.highslide-image').attr('src') == 'images/6.jpg') {
                                thisImage = 6;
                                } else if ($('img.highslide-image').attr('src') == 'images/7.jpg') {
                                thisImage = 7;
                                } else if ($('img.highslide-image').attr('src') == 'images/8.jpg') {
                                thisImage = 8;
                                } else if ($('img.highslide-image').attr('src') == 'images/9.jpg') {
                                thisImage = 9;
                                } else if ($('img.highslide-image').attr('src') == 'images/10.jpg') {
                                thisImage = 10;
                                } else if ($('img.highslide-image').attr('src') == 'images/11.jpg') {
                                thisImage = 11;
                                } else if ($('img.highslide-image').attr('src') == 'images/12.jpg') {
                                thisImage = 12;
                                } else if ($('img.highslide-image').attr('src') == 'images/13.jpg') {
                                thisImage = 13;
                                }
                        });
                        $(function() {
                                if (thisImage == 1) {
                                        thisImage = 1;
                                        } else {
                                        thisImage--;
                                }

                        });

                        $('img.highslide-image').attr({ src: 'images/' + thisImage + '.jpg' });

                        var theTitle = $('div#myImageFlow_caption').text();

                        $('div.highslide-caption').html(theTitle);

                        break;       
                case 39:
                        $(function() {
                                if ($('img.highslide-image').attr('src') == 'images/1.jpg') {
                                thisImage = 1;
                                } else if ($('img.highslide-image').attr('src') == 'images/2.jpg') {
                                thisImage = 2;
                                } else if ($('img.highslide-image').attr('src') == 'images/3.jpg') {
                                thisImage = 3;
                                } else if ($('img.highslide-image').attr('src') == 'images/4.jpg') {
                                thisImage = 4;
                                } else if ($('img.highslide-image').attr('src') == 'images/5.jpg') {
                                thisImage = 5;
                                } else if ($('img.highslide-image').attr('src') == 'images/6.jpg') {
                                thisImage = 6;
                                } else if ($('img.highslide-image').attr('src') == 'images/7.jpg') {
                                thisImage = 7;
                                } else if ($('img.highslide-image').attr('src') == 'images/8.jpg') {
                                thisImage = 8;
                                } else if ($('img.highslide-image').attr('src') == 'images/9.jpg') {
                                thisImage = 9;
                                } else if ($('img.highslide-image').attr('src') == 'images/10.jpg') {
                                thisImage = 10;
                                } else if ($('img.highslide-image').attr('src') == 'images/11.jpg') {
                                thisImage = 11;
                                } else if ($('img.highslide-image').attr('src') == 'images/12.jpg') {
                                thisImage = 12;
                                } else if ($('img.highslide-image').attr('src') == 'images/13.jpg') {
                                thisImage = 13;
                                }
                        });
                        $(function() {
                                if (thisImage == maxImage) {
                                        // Do Nothing....
                                        } else {
                                        thisImage++;
                                }
                        });

                        $('img.highslide-image').attr({ src: 'images/' + thisImage + '.jpg' });

                        var theTitle = $('div#myImageFlow_caption').text();

                        $('div.highslide-caption').html(theTitle);
                        break;  
        }
}
});
});
于 2009-09-18T18:41:57.527 回答
3

你可以用正则表达式替换你的 if else 块，它会缩短和简化你的代码

var re = new RegExp('images/([0-9]+).jpg');
var m = re.exec($('img.highslide-image').attr('src'));
if (m && m.length > 0) {
    thisImage = m[0];
}
于 2009-09-18T18:50:20.623 回答