Javascript slideshow疑难解答

问题描述：

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

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

编辑

幻灯片播放目前工作正常。由于它现在正在工作，我正在研究为控件创建按钮，而不是超链接。我正在计划使用幻灯片分区进行此操作。但我不确定如何编辑CSS和HTML，使按钮出现在幻灯片上方并保留在确切的位置。

更新

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

欢迎来到SO。请提供更详细的问题描述。图像旋转但不加载？控制台中的错误？ – isherwood 2014-09-23 15:05:04

并且还提供小提琴 – anni 2014-09-23 15:10:23

@isherwood问题的第一部分已得到纠正;当我需要从服务器检索照片时，我在本地引用照片。 – 2014-09-23 15:53:04

答

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

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

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

谢谢你Joeppie。我能够成功地实现你的伪代码，并且在这个过程中发现了我的错误，从而阻止了图像的显示。当我需要从服务器运行它时，我将它作为本地目录运行。谢谢。我现在正在尝试制作幻灯片的按钮。是否有使用CSS或HTML制作链接的方法：下一张幻灯片，上一张幻灯片，暂停，播放幻灯片上的实际按钮？ – 2014-09-23 15:43:19

CSS确实如同过渡这些天，我建议使用Google，我有一列火车赶上。很高兴能成为服务:) – Joeppie 2014-09-23 15:47:23

我期待谷歌，谢谢！ – 2014-09-23 15:55:00

Javascript slideshow疑难解答

相关推荐