我是网页设计的新手,这正是我想要的(在一定程度上有效):我显示了这个小img数组(在#image holder中),每次点击img,它都会在另一个标签(在#bigimg中)中以全尺寸打开。我还设法制作了一个数组中所有图像(全尺寸)的滑块(在#bigimg中)。你可以通过点击按钮来回移动。我不能做的是"获取"点击的img的特定src,这样通过点击"下一个"按钮将idd显示数组中的下一个img[并且"prev"按钮将显示上一个img]。这是我到目前为止的代码:
var images=new Array();
var i;
$(document).ready(function(){
$.getJSON("image_slider.php", function(json) {
for(i=0; i<json.length; i++)
{
images[i]="images/"+json[i];
$('<img>').attr('src',images[i]).css({"width":"60px", "padding":"5px"}).appendTo('#image-holder');
}
var theimgs= document.getElementById("image-holder").getElementsByTagName("img") ;
for (i in theimgs)
{
theimgs[i].onclick=function (){
getimg (this) ;}
}
});
});
function getimg (z){
var n=document.getElementById("bigimg") ;
n.src= z.src ; }
var x=0 ;
function getall_next (){
x++;
var n=document.getElementById("bigimg") ;
n.src=images[x] ;
if (x==images.length)
{
x=0 ;
n.src=images[0] ;
} }
function getall_prev (){
var n=document.getElementById("bigimg") ;
if (x==0)
{
x=images.length ;
n.src=images[images.length] ;
x-- ;
}
else
x-- ;
n.src=images[x] ; }
如果您使用jquery
,您可以用更少的代码完成所有这些,但由于您使用的是纯javascript
var image_src = document.getElementById("bigimg").src;
根据您的响应,这里有一些伪代码。
//when you set the bigimg
last_image = bigimg.src;
bigimg.src = newimg;
current_image = newimg;
//then before setting new img you
//you can access those variables you set above
好的,经过大量研究和试验;错误,我终于找到了解决方案:P这是我的代码,现在运行得很好,还有一个非常有用的链接,它帮助了我http://thecodeplayer.com/walkthrough/jquery-css3-lightbox-tutorial。我不得不调整它——我使用php从文件夹中获取图像——所以它是:
var images=new Array();
var i;
$(document).ready(function(){
$.getJSON("MY_img_array.php", function(json){
for(i=0; i<json.length; i++)
{
images[i]="images/"+json[i];
$('<img>').attr('src',images[i]).css({"width":"60px", "padding":"5px"}).appendTo('#imgarray');
}
$("#imgarray img").click(function() {
$("#imgarray img.active").removeClass("active");
$(this).addClass("active");
var large_img = new Image();
large_img.src = this.src;
$('div#bigimg').html(large_img);
});
$("#prevbtn").click(function(){ navigate(-1) });
$("#nextbtn").click(function(){ navigate(1) });
function navigate(direction) {
if(direction == -1) // left
$("#imgarray img.active").prev().trigger("click");
else if(direction == 1) //right
$("#imgarray img.active").next().trigger("click");
}
});
});