我有一个画廊，可以通过 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
}
});