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

希望这有帮助！

用左右箭头更改图像

2 个答案: