纯javascript carousel
我是Javascript的新手，我正在尝试用纯Javascript做一个简单的旋转木马，没有任何像JQuery或Bootstrap这样的库。这就是我所拥有的，但是如果你点击下一个，然后点击上一个，图像的顺序是错误的。我做错了什么？https://jsfiddle.net/ddLxvzoj/1/
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Carousel</title>
<link rel="stylesheet" href="carousel.css">
</head>
<body onload="init()">
<script src="carousel.js"></script>
<div id="carousel">
<ul>
<li><img id="photo" src=""></li>
</ul>
<a class="arrow left-carousel" href="#" onclick="previous()"> < </a>
<a class="arrow right-carousel" href="#" onclick="next()"> > </a>
</div>
</body>var images = ["http://www.rideboard.fr/wp-content/themes/rideboard/images/slidehome/home-06.jpg", "http://www.spotsurf.fr/wp-content/uploads/2013/02/la-graviere-spot-surf.jpg", "http://www.surfsession.com/wp-content/uploads/2013/03/landes_line_up.jpg"];
var index = 0;
function init() {
next();
}
function interval(){
setInterval(function (){
next();
}, 2000);
}
function next(){
if(index >= images.length) {
index = 0;
}
if(index <= -1){
index = 1;
}
document.getElementById('photo').src = images[index];
index++;
}
function previous (){
if (index <= -1) {
index = images.length - 1;
}
if (index >= images.length) {
index = 1;
}
document.getElementById('photo').src = images[index];
index--;
}编辑:现在我试着在图片的底部添加一个“指示器”，以便查看你是哪张图片。如果我点击一个按钮，它会显示正确的图像。但我不知道该怎么做。
回答 2
Stack Overflow用户
发布于 2015-09-13 06:13:24
你有很多事情要做。但看起来这就是你想要做的：
1)页面加载时加载图片
2)当用户单击右箭头时，将图片更改为数组中的下一个图片。如果我们超过了图像数组的末尾，返回到第一个图像，给人一种"carousel“的错觉。
3)当用户单击左箭头时，将图片更改为数组中的上一张图片。如果这会把我们放在数组的开头，那么转到数组中的最后一个图像，给人一种旋转木马的错觉。
4)这张图片我不太确定，但看起来你每隔两秒就会把图片换成下一张。是那么回事吗？
你真正需要做的就是把事情简化一点。
首先，创建一个根据当前索引更新图像src的函数。(您将从next()和previous()函数中调用它)
function updateImageSrc(){
document.getElementById('photo').src = images[index];
}现在，简化您的next()和previous()函数：
function next(){
index++;
if(index == images.length)
index = 0;
updateImageSrc();
}
function previous(){
index--;
if(index == -1)
index = images.length - 1;
updateImageSrc();
}现在，让init函数更加清晰：
function init(){
//initialize the image
index = 0;
updateImageSrc();
//set up the auto slideshow dealy
setInterval(next, 2000);//no need to wrap "next" inside a function, you can just pass in the reference to the function itself.
}希望这能有所帮助。如果您需要进一步的指导，请注解。
编辑:在评论中回答发帖者的问题。
要添加显示名称的标签，您需要做两件事。1)添加显示图片名称的HTML元素。2)在javascript中，每当图像发生变化时，也要更改名称。
1)显示名称的HTML元素：
<span id="image-name-display"></span>2)在javascript中更新。我建议将updateImageSrc()函数修改为以下内容：
function updateImageSrc(){
document.getElementById('photo').src = images[index];
document.getElementById('image-name-display').textContent = index.
}这将显示您当前所在图像的索引号。如果您想要每个图像的描述或标题。您可能希望在init()函数中添加类似以下内容：
var imageTitles = ['Surfing Malibu', 'The Pipeline', 'Laie at Sunset'];上面声明了一个图像标题数组。每个标题在数组中的位置应该与它所描述的图像相同。
那么你在updateImageSrc()函数中的代码行将是：
document.getElementById('image-name-display').textContent = imageTitles[index];有许多不同的方法可以做到这一点，但这种方法非常简单。希望能有所帮助。
Stack Overflow用户
发布于 2015-09-13 05:57:42
我向您提出一个替代解决方案：
function next(){
index++; //We go to the next image
fixIndex(index); //We check if we are out of bounds
document.getElementById('photo').src = images[index]; //We show that image
};
function previous (){
index--; //We go to the previous image
fixIndex(index); //We check if we are out of bounds
document.getElementById('photo').src = images[index]; //We show that image
};
/* Fixes "out of bound" indexes */
function fixIndex() {
if(index >= images.length)
index = 0;
else if(index < 0)
index = images.length - 1;
};https://stackoverflow.com/questions/32544031
复制相似问题