Img 滑块 - 基于数组中“单击”的 img 的下一个或上一个 img src答案

【问题标题】：Img slider - next or prev img src based on a "clicked" img from an arrayImg 滑块 - 基于数组中“单击”的 img 的下一个或上一个 img src
【发布时间】：2013-06-27 12:06:23
【问题描述】：

我是网页设计的新手，这就是我想要的（工作到一定程度）：我显示了这个小图像数组（在 #image-holder 中），你点击的每个图像，它都会在另一个标签中打开（在#bigimg 中）全尺寸。我还设法为数组中的所有图像（全尺寸）制作了一个滑块（在#bigimg 中）。您可以通过单击按钮来回移动。我不能做的是“获取”clicked img 的特定 src，以便通过单击“next”按钮将显示下一个（that）img array [ 和“prev”按钮将显示实际的上一个（that）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] ; }

【问题讨论】：

标签： php javascript jquery

【解决方案1】：

如果你使用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

【讨论】：

#bigimg 已经收到带有 getimg(z) 的 src --> 当单击 #image-holder 中的一个小图像时。我相信我的错误是在 getall_next 和 getall_prev 函数之前设置 x=0 时，导致 n.src=images[x] 把它搞砸了。我需要以某种方式将收到的最后一个 src 为 #bigimg （最后点击的小 img）与我的数组中的下一个或上一个 img src 连接起来，否则当单击下一个/上一个按钮时，“滑块”从头开始而不是从随机点击的img。感谢您的快速回复，我知道您存储了 src 但我看不到如何继续：S
嗯在某些时候这会有所帮助我仍然感到困惑，我明天再看一遍，我的眼睛在抱怨......非常感谢你！
好的，事情是这样的：你的逻辑听起来很合适，除了一件事：x 指的是数组中元素的“位置”。所以我需要的不仅是获取最后点击的 img 的 src，更重要的是，它在数组 images[i] 中的位置（i=?）。这就是我一直在尝试但没有成功的事情：S

【解决方案2】：

好吧，经过大量研究和反复试验，我终于找到了解决方案：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");
                }
        });
    });

【讨论】：