使用左右箭頭更改圖像

Question

我有一個使用onclick更改圖像的圖庫，但我也希望使用左右箭頭控件更改圖像。

我真的很感謝任何幫助。

下面是我正在使用的JavaScript。

$(document).ready(function(){ 
$.fn.gallerySplash = function(){ 
    var object = $(this), 
     imageHolder = $("#imageHolder",object), 
     image = $("#imageHolder > img",object), 
     imageSRCLink = $("ul>li>a",object), 
     imageDeltaX, 
     imageDeltaY, 
     imageK =image.height()/image.width(), 
     holderK =imageHolder.height()/imageHolder.width(), 
     imagePercent = (image.height()/image.width())*100, 
     imgSRC, 
     currImg = 0, 
     prevImg = 0, 
     allImg = imageSRCLink.length, 
     autoPlayState = false, 
     autoPlayTime = 8, 
     loadComplete = true, 
     doc=$(document), 
     openGall = false, 
     MSIE8 = ($.browser.msie) && ($.browser.version <= 8); 

    init() 

    function init(){ 
     $(window).resize(resizeImageHandler).trigger('resize'); 
     $(window).bind("hashchange", changeHash); 
     $("#next").bind("mousedown", function(){ 
      changePreviewPosition(-1); 
      return false;   
     }); 
     $("#prev").bind("mousedown", function(){ 
      changePreviewPosition(1); 
      return false;   
     }); 
     $("window, document, #prev, #next, body, #wrapper").bind("mouseup", function(){ 
      stopPreviewPosition(); 
      return false;   
     }); 
     $("#prev, #next").click(
      function(){ 
       return false;   
      } 
     ) 
     $("#closeGallery").click(function(){ 
      if(openGall){ 
       openGall = false; 
       $("#previewHolder").stop().animate({left:45}, 500, "easeInOutCubic"); 
       if(!MSIE8){ 
        $(this).css({backgroundPosition:"3px 14px"}).stop().animate({scale:1}, 0).css({left:"192px", top:"50%"}); 
       } 
      }else{ 
       openGall = true; 
       $("#previewHolder").stop().animate({left:245}, 500, "easeInOutCubic"); 
       if(!MSIE8){ 
        $(this).css({backgroundPosition:"14px 14px"}).stop().animate({scale:-1}, 0).css({left:"192px", top:"50%"}); 
       } 
      } 
      return false;   
     }).hover(
      function(){ 
       if(openGall){ 
        $(this).stop(true).animate({left:187}, 250, "easeOutExpo") 
       }else{ 
        $(this).stop(true).animate({left:197}, 250, "easeOutExpo") 
       } 
      }, 
      function(){ 
       $(this).stop().animate({left:192}, 250, "easeOutExpo") 
      } 
     ); 
     $("#previewHolder ul>li>a").each(function(){ 
      $(this).append("<div class='over'></div>") 
      $(".over", this).animate({opacity:0}, 150, "easeInOutCubic") 
     }).click(
      function(){ 
       if($(this).parent().index()!=currImg && loadComplete){ 
        $("#previewHolder ul>li").eq(currImg).find("a>.over").stop(true).animate({opacity:0}, 150, "easeInOutCubic") 
        currImg=$(this).parent().index(); 
        changeImageHandler(); 
        $("#imageCaption").html($(this).attr('title')); 
       } 
       return false;   
      } 
     ).hover(
      function(){ 
       if($(this).parent().index()!=currImg){ 
        $(".over", this).stop(true).animate({opacity:1}, 300, "easeInOutCubic") 
       } 
      }, 
      function(){ 
       if($(this).parent().index()!=currImg){ 
        $(".over", this).stop().animate({opacity:0}, 300, "easeInOutCubic") 
       } 
      } 
     ); 
     $("#previewHolder ul>li").eq(currImg).find("a>.over").stop().animate({opacity:1}, 0) 
     autoPlayHandler(); 
    } 
    function changeHash(){ 
     if(window.location.hash.substring(3, window.location.hash.length)==$("#menu dd").eq(0).attr("id") && !openGall){ 
      openGall = true; 
      $("#previewHolder").stop().animate({left:245}, 500, "easeInOutCubic") 
      if(!MSIE8){ 
       $("#closeGallery").css({backgroundPosition:"14px 14px"}).stop().animate({scale:-1}, 0).css({left:"192px", top:"50%"}); 
      } 
     } 
    } 
    function changePreviewPosition(number){ 
     var innerH = $("#inner").height(), 
      ulH = $("#inner>ul").height(), 
      scrollTime;   
     if(number==-1){ 
      scrollTime = Math.abs(parseInt($("#inner>ul").css("top"))*5000/(ulH-innerH)); 
      $("#inner>ul").stop(true).animate({top:0}, scrollTime, "linear"); 
     }else{ 
      scrollTime = Math.abs((parseInt($("#inner>ul").css("top"))+(ulH-innerH))*5000/(ulH-innerH)); 
      $("#inner>ul").stop(true).animate({top:-(ulH-innerH)}, scrollTime, "linear"); 
     } 
    } 
    function stopPreviewPosition(){ 
     $("#inner>ul").stop(true) 
    } 
    function autoPlayHandler(){ 
     setTimeout(function(){ 
      if(autoPlayState){ 
       prevImg = currImg; 
       currImg++ 
       if(currImg>=allImg){ 
        currImg = 0 
       } 
       changeImageHandler() 
      } 
     }, autoPlayTime*1000) 
    } 
    function resizeImageHandler(){ 
     image = $("#imageHolder > img"); 
     imageK =image.height()/image.width() 
     holderK =doc.height()/doc.width(); 
     if(holderK>imageK){ 
     }else{ 
     } 
     imageDeltaX=0//-(image.width()-doc.width())/2; 
     imageDeltaY=-(image.height()-doc.height())/2; 
     image.css({left:imageDeltaX, position:"absolute"}); 
    } 
    function changeImageHandler(){ 
     loadComplete = false; 
     image.addClass("topImg"); 
     imgSRC = imageSRCLink.eq(currImg).attr("href"); 
     imageHolder.append("<div id='imgSpinner'></div><img class='bottomImg' src="+imgSRC+" alt=''>"); 
     $("#imgSpinner").css({opacity:0}).stop().animate({opacity:0.5}, 500, "easeInOutCubic"); 
     $(".bottomImg").bind("load", loadImageHandler) 
    } 
    function loadImageHandler(){ 
     setTimeout(function(){ 
      $(".bottomImg").unbind("load", loadImageHandler); 
      $("#imgSpinner").stop().animate({opacity:"0"}, 1000, "easeInOutCubic") 
      resizeImageHandler(); 
      $(".topImg").stop().animate({opacity:"0"}, 1000, "easeInOutCubic", function(){ 
       $("#imgSpinner").remove(); 
       $(".topImg").remove(); 
       image.removeClass("bottomImg"); 
       loadComplete = true; 
       autoPlayHandler() 
      }) 
     }, 1000) 
    } 
} 
}) 

在你的代碼的幫助下，我做到了這一點，它爲我工作，但仍然造成一些問題。它只工作一次而不改變currImg索引，請幫助我。

您可以檢查現場版在這裏：http://www.solvonix.co.in/clients/demo/

修改後的代碼：

$(window).keydown(function(event){ 
if (event.which == 37) { 
// left arrow; go back 
currImg=$(this).parent().index(); 
currImg-- 
if(currImg<=0){ 
    currImg = 0 
}  
changeImageHandler(); 
} 
if (event.which == 39) { 
currImg=$(this).parent().index(); 
currImg++ 
prevImg = currImg 
if(currImg>=allImg){ 
    currImg = allImg 
} 
            currImg++ 
changeImageHandler(); 
// right arrow; go forward 
} 

}）;

Answer 1

嘗試把這個代碼在init()功能

$('window').live('keypress', function (e) { 
    if (e.keyCode == 37){ 
     changePreviewPosition(1); //left key 
     return false; 
    } 
    if (e.keyCode == 39){ 
     changePreviewPosition(-1); //right key 
     return false; 
    } 
}) 

希望這有助於

Answer 2

使用此：

$(window).keydown(function(event){ 
    if (event.which == 37) { 
    // left arrow; go back 
    changePreviewPosition(1) 
    } 
    if (event.which == 39) { 
    // right arrow; go forward 
    changePreviewPosition(-1) 
    } 
}) 

希望這有助於！