Javascript幻灯片故障排除

Javascript slideshow troubleshooting

本文关键字：排除 故障 幻灯片 Javascript      更新时间：2023-09-26

我正在为我的公司创建一个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，使按钮出现在幻灯片的顶部并保持在准确的位置。

更新

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

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

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

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

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

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

因此，您可以重复使用相同的<img>标签，您所需要做的就是重新指向它的图像标签。

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中调用navigation函数来执行导航。同样，您应该能够在计时器内调用它。

相关文章：