写图片库的错误

我想为一个网站编写一个简单的图片库元素，而且我因为愚蠢的原因而遇到了代码问题。我从来没有使用过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; 
    } 
} 
}

来源

2013-06-03 Piers Williams

for(var slider in sliders) 
{ 
// here slider is the index of the array. to get the object use sliders[slider] 
}

那么你可以使用 'getElementsByClassName方法' 功能

编辑

û有在html的顶部包含slider.js。所以首先加载js并尝试访问尚未创建的元素。将标记移动到页面的底部。

sliderImages是一个classname为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){

到

this.Slide = function(id, additive){ // otherwise it will be called when the page is loaded with undefined values.

的onclick与报价链接调用的
```
Slider.Slide('main', 1) 
```

来源

2013-06-03 13:07:43 lintu

与图像，如果我有一个以上的画廊或图像在页面上的其他地方，我会只返回存储过多的图像在sliderImages div –

我已将代码更改为当前版本，主要问题是var滑块实际上并没有任何内容 - 它根本没有拾取div –

我已将它移除，但它仍然使用null参数执行每个函数，但是我已经为此进行了检查。现在滑块没有定义 - 这真是令人困惑，因为我在网站的主代码中定义了类似的对象，并且没有这样的问题... –

您使用的是梅索德我不知道（或者你忘了 “S”）

var sliderImages = slider.getElementByClassName('sliderImages');

我会使用类似下面的代码。这一点很重要sliderImages将是任何一个数组，它是类 “silderImages”

var sliderImages =slider.getElementsByClassName("sliderImages")

来源

2013-06-03 12:52:36

我已经切换到该行，是一个简单的错字 - 但我仍然有问题，该行 this.indices [slider.id] = 0; 对于未定义的“未定义的”类型错误：无法设置属性未定义“ –

写图片库的错误

回答

相关问题