Javascript 幻灯片故障排除答案

【问题标题】：Javascript slideshow troubleshootingJavascript 幻灯片故障排除
【发布时间】：2016-03-03 18:34:44
【问题描述】：

我正在为我的公司创建一个 Javascript 幻灯片，但是在编写代码后我的图像没有显示。此幻灯片的目标是可扩展的，以便我可以在需要时添加更多图像。我还将切换按钮的上一个和下一个 HTML 超链接。任何帮助或建议将不胜感激。

<html>
<head>

<script language="JavaScript">

var interval = 1500;
var random_display = 0;
var imageDir = "v/vspfiles/templates/133/images/template/";

var imageNum = 0;

imageArray = new Array();
imageArray[imageNum++] = new imageItem(imageDir + "091814_banner.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "0914_Banner1.jpg")
imageArray[imageNum++] = new imageItem(imageDir + "0914_Banner-1_v2.jpg")
imageArray[imageNum++] = new imageItem(imageDir + "navigation_background_left2.png")

var totalImages = imageArray.length;

function imageItem(image_location){
  this.image_item = new Image();
  this.image_item.src = image_location;
}

function get_ImageItemLocation(imageObj){
  return(imageObj.image_item.src);
}

function randNum(x,y){
  var range = y - x + 1;
  return Math.floor(Math,random() * range) + x;
}

function get_NextImage() {
  if(random_display){
    imageNum = randNum(0,totalImages-1);
}
  else{
    imageNum = (imageNum + 1) % totalImages;
}
  var new_image = get_ImageItemLocation(imageArray[imageNum]);
  return (new_image);
}

function get_PrevImage(){
  imageNum = (imageNum-1) % totalImages;
  var new_image = get_ImageItemLocation(imageArray[imageNum]);
  returns(new_image);
}

function prevImage(place){
  var new_image = get_PrevImage();
  document[place].src = new_image;
}

function switchImage(place) {
  var new_image = get_NextImage();
  document[place].src = new_image;
  var recur_call = "switchImage('"+place+"')";
  timerID = setTimeout(recur_call,interval);
}



</script>

</head>

<body onLoad="switchImage('slideImg')">
<img name="slideImg" src="DSC09890.JPG" width=500 height=375 border=0>
<a href="#" onClick="switchImage('slideImg')">play slide show</a>
<a href="#" onClick="clearTimeout(timerID)"> pause</a>
<a href="#" onClick="prevImage('slideImg'); clearTimeout(timerID)"> previous</a>
<a href="#" onClick="switchImage('slideImg'); clearTimeout(timerID)">next </a>

</body>
</html>

编辑

幻灯片现在可以正常工作了。由于它现在正在工作，我正在研究为控件创建按钮而不是超链接。我打算用幻灯片 Div 来做这件事。但是我不确定如何编辑 CSS 和 HTML 以使按钮出现在幻灯片的顶部并保持在确切的位置。

更新

我已经解决了如何创建按钮。但是，我以前的按钮不起作用。所有其他按钮都是。

【问题讨论】：

欢迎来到 SO。请提供更详细的问题描述。图像是否旋转但不加载？控制台出错？
还提供一把小提琴
@isherwood 问题的第一部分已更正；当我需要从服务器检索照片时，我在本地引用它们。
@anni 对不起，我不确定你的意思。
@isherwood jsfiddle.net/ghmjjbvr 这是您要找的东西吗？

标签： javascript slideshow

【解决方案1】：

如何先简化代码的输入，然后相应地重写它？假设所有图像都在同一个位置，一个好的起点是创建一个仅包含图像名称的数组：

（免责声明：我没有测试此代码，它可能包含语法错误，认为它是伪代码）

var images = ["image1.png","image2.jpg"];

假设您在页面上一次只显示一个图像，您可以保留一个包含正在显示的索引的全局变量。

var currentImage = 0; //starting image
var imageElement = document.getElementById("slideImg") //put this in the id instead of 'name'

因此，您可以在页面上重复使用相同的标签，您只需重新指向它的图像标签。

function navigate(direction) {
    switch(direction){
//using modulo and adding the length of the array, we ensure we get positive offsets within the array.
    case "back" : currentimage = (currentImage-- +images.length)%images.length;
    case "forward" :  (currentImage++ +images.length)%images.length;
}
 imageElement.src = images[currentImage];
}

现在您应该能够从您在页面上添加的元素的 onclick 中调用导航功能来执行导航。同样，您应该可以在计时器中调用它。

【讨论】：

谢谢乔皮。我能够成功实现您的伪代码，并且在此过程中发现了我的错误，即阻止图像显示。当我需要从服务器运行它时，我将它作为图片的本地目录运行。谢谢。我现在正在尝试为幻灯片制作按钮。有没有办法使用 CSS 或 HTML 来制作链接：下一张幻灯片、上一张幻灯片、暂停、播放幻灯片上的实际按钮？
CSS 这些天确实是过渡，我建议谷歌搜索，我有火车要赶。很高兴为您服务:)