Question

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

更新

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

Answer 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'

因此，您可以重复使用相同的＆lt; img＆gt;在页面上标记，您需要做的就是重新指向它的图像标记。

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

Javascript幻灯片故障排除

1 个答案: