1

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

2 回答 2

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

那么你可以使用'getElementsByClassName'函数

编辑

  1. 你已经在 html 的顶部包含了 slider.js。所以首先它会加载 js 并尝试访问尚未创建的元素。将标签移动到页面底部。

  2. sliderImages 是一个类名为 sliderImages 的 div 数组。只有一个满足。

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

  3. 改变

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

    到

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

  4. onclick 带引号的链接调用

    Slider.Slide('main', 1)
于 2013-06-03T13:07:43.993 回答
0

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

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

我会使用类似下面的代码。重要的是，sliderImages 将是“silderImages”类的任何内容的数组

 var sliderImages  =slider.getElementsByClassName("sliderImages")
于 2013-06-03T12:52:36.730 回答