我正在尝试为网站编写一个简单的图像库元素，但由于愚蠢的原因，我在代码方面遇到了麻烦。我从来没有接触过 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;
}
}
}
最佳答案
for(var slider in sliders)
{
// here slider is the index of the array. to get the object use sliders[slider]
}
然后您可以使用“getElementsByClassName”函数
编辑
您已将 slider.js 包含在 html 顶部。因此，它首先加载 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){到
this.Slide = function(id, additive){ // otherwise it will be called when the page is loaded with undefined values.带引号的链接调用的 onclick
Slider.Slide('main', 1)
关于javascript - 写入图库时出错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16896820/