Javascript 写入图像库时出错_Javascript_Image_Gallery_Undefined

Javascript 写入图像库时出错

javascript image

Javascript 写入图像库时出错,javascript,image,gallery,undefined,Javascript,Image,Gallery,Undefined,我试图为一个网站编写一个简单的图片库元素，但由于愚蠢的原因，我在代码方面遇到了麻烦。我从来没有接触过JavaScript，总是觉得它令人头痛。我尝试过其他各种图像库，但我一生也无法让它们真正正常工作我当前的HTML代码如下所示： <!DOCTYPE html> <html> <head> <title> Test of slider </title> <script type="

我试图为一个网站编写一个简单的图片库元素，但由于愚蠢的原因，我在代码方面遇到了麻烦。我从来没有接触过JavaScript，总是觉得它令人头痛。我尝试过其他各种图像库，但我一生也无法让它们真正正常工作

我当前的HTML代码如下所示：

<!DOCTYPE html>
<html>
    <head>
        <title> Test of slider </title>     
        <script type="text/javascript" src="slider.js"></script>
    </head>
    <body>
        <div class="slider" id="main">
            <img src="#" class="mainImage" />
            <div class="sliderImages" style="display: none;">
                <img src="companion.jpg"/>              
                <img src="cookie.jpg" />
                <img src="orange.jpg" />
                <img src="orangeWhole.jpg" />
            </div>
            <div class="sliderButtons">
                <a href="#" onclick="Slider.Slide('main', -1)"> Previous </a>
                <a href="#" onclick="Slider.Slide('main', 1)"> Next </a>
            </div>
        </div>      
    </body>
</html>


滑块试验

使用如下javascript：

this.Slider = new function(){
// Stores the indices for each slider on the page, referenced by their ID's
var indices = {};
var limits = {};
var images = {};

// Call this function after a major DOM change/change of page
this.SetUp = function(){        
    // obtain the sliders on the page
    // TODO restrict to those within body
    var sliders = document.getElementsByClassName('slider');
    // assign the indices for each slider to 0
    for(var i = 0; i < sliders.length; i++){
        indices[sliders[i].id] = 0;
        var sliderImages = document.getElementsByClassName('sliderImages');
        var imagesTemp = sliderImages[0].getElementsByTagName('img');
        images[sliders[i].id] = imagesTemp;
        limits[sliders[i].id] = imagesTemp.length;
    }
}

// advances a certain slider by the given amount (usually 1 or -1)
this.Slide = function(id, additive){
    if(indices && id){
        indices[id] = indices[id] + additive;

        // Check limits
        if(indices[id] < 0){
            indices[id] = limits[id] - 1;
        }
        if(indices[id] >= limits[id]){
            indices[id] = 0;
        }

        // alter img to be the new index
        document.getElementById(id).getElementsByClassName('mainImage')[0].src = images[id][indices[id]].src;
    }
}
}

this.Slider=新函数（）{
//存储页面上每个滑块的索引，由其ID引用
var指数={}；
变量限制={}；
var图像={}；
//在主要DOM更改/页面更改后调用此函数
this.SetUp=function（）{
//获取页面上的滑块
//TODO仅限于身体内的人
var sliders=document.getElementsByClassName（'slider'）；
//将每个滑块的索引指定为0
对于（变量i=0；i=限制[id]）{
索引[id]=0；
}
//将img更改为新索引
document.getElementById（id）.getElementsByClassName（'mainImage'）[0].src=images[id][index[id]].src；
}
}
}

您正在使用一种我不知道的方法（或者您忘记了“s”）

我会使用下面的代码。幻灯片图像将是“silderImages”类的任何内容的数组，这一点很重要

您正在使用一种我不知道的方法（或者您忘记了“s”）

我会使用下面的代码。幻灯片图像将是“silderImages”类的任何内容的数组，这一点很重要

然后可以使用“GetElementsByCassName”函数

编辑

您已经在html的顶部包含了slider.js。因此，首先它加载js并尝试访问尚未创建的元素。将标记移动到页面底部

sliderImages是具有类名sliderImages的div数组。只有一种满足

var sliderImages // is a array with 1 item.
             // to get the images use sliderImages[0].getElementsByTagName('img');

改变

this.Slide = new function(id, additive){

到

单击带有引号的链接调用

Slider.Slide('main', 1)

然后可以使用“GetElementsByCassName”函数

编辑

您已经在html的顶部包含了slider.js。因此，首先它加载js并尝试访问尚未创建的元素。将标记移动到页面底部

sliderImages是具有类名sliderImages的div数组。只有一种满足

var sliderImages // is a array with 1 item.
             // to get the images use sliderImages[0].getElementsByTagName('img');

改变

this.Slide = new function(id, additive){

到

单击带有引号的链接调用

Slider.Slide('main', 1)

对于图像，如果我在页面上的其他地方有多个图库或图像，就会返回太多的图像，我只需要那些存储在sliderImages div中的图像。我已将代码更改为当前版本，主要问题是var sliders中实际上没有任何内容-它根本没有拾取div，我已将其向下移动，但它仍然使用空参数执行每个函数，但我已经对此进行了检查。但是现在滑块是未定义的-这真的很让人困惑，因为我在网站的主代码中定义了类似的对象，并且没有这样的问题…我告诉过你从这个。Slide函数中删除新的。。U从滑块类和设置函数中删除。。现在，它们从未被初始化。。你还错过了Slider main函数的结束括号。JSFIDLE中的js代码不起作用-我得到一个错误，因为Slider列表是空的-document.getElementsByClassName（'Slider'）不起作用，这很奇怪，尽管如果我从安装程序中删除新的并在onload中调用它，我现在已经有了一个起作用的滑块。谢谢你的图片，如果我在页面的其他地方有多个图库或图片，那会返回太多的图片，我只需要那些存储在sliderImages div中的图片我已经将代码更改为当前版本，主要问题是var sliders实际上没有任何内容-它根本没有拾取div我已经将其向下移动，但它仍然使用空参数执行每个函数，但我已经对此进行了检查。但是现在滑块是未定义的-这真的很让人困惑，因为我在网站的主代码中定义了类似的对象，并且没有这样的问题…我告诉过你从这个。Slide函数中删除新的。。U从滑块类和设置函数中删除。。现在，它们从未被初始化。。你还错过了Slider main函数的结束括号。JSFIDLE中的js代码不起作用-我得到一个错误，因为Slider列表是空的-document.getElementsByClassName（'Slider'）不起作用，这很奇怪，尽管如果我从安装程序中删除新的并在onload中调用它，我现在已经有了一个起作用的滑块。谢谢，我把这一行换成了这一行，这是一个简单的打字错误——但我仍然有一个问题，那就是这一行的索引[slider.id]=0；“Uncaught TypeError:Cannot set property'undefined'of undefined”的错误。我已经将行切换到该行，这是一个简单的输入错误-但我仍然存在这样的问题：行this.indexes[slider.id]=0；正在获取“未捕获的TypeError:无法设置未定义的属性'undefined'的错误”

Slider.Slide('main', 1)