자바 스크립트 슬라이드 쇼 문제 해결

내 회사의 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을 편집하여 버튼을 슬라이드 쇼 위에 표시하고 정확한 위치에 머물게하는 방법을 잘 모르겠습니다.

업데이트

어떻게 버튼을 만들 수있는 해결했다. 그러나 이전 버튼이 작동하지 않습니다. 다른 버튼은 모두 있습니다.

출처

2014-09-23 Jeramy Smith

안녕하세요. 문제에 대한 자세한 설명을 제공해주십시오. 이미지가 회전 하나로드되지 않습니까? 콘솔의 오류? – isherwood

또한 희곡을 제공합니다. – anni

@isherwood 문제의 첫 번째 부분이 수정되었습니다. 서버에서 이미지를 가져와야 할 때 로컬에서 사진을 참조하고있었습니다. –

먼저 코드의 입력을 단순화 한 다음 그에 맞게 다시 작성하는 방법은 어떻습니까? 모든 이미지가 같은 위치에 있다고 가정하면 이미지 이름 만 포함하는 배열을 만드는 것이 좋습니다.

(면책 조항 :이 코드를 테스트하지 않았으며 구문 오류가있을 수 있습니다. 코드)

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 내에서 탐색 기능을 호출 할 수 있어야합니다. 마찬가지로 타이머에서 호출 할 수 있어야합니다.

출처

2014-09-23 15:17:05 Joeppie

감사합니다. Joeppie. 의사 코드를 성공적으로 구현할 수 있었고 그 과정에서 실수로 이미지가 표시되는 것을 막았습니다. 저는 이것을 서버에서 실행해야 할 때 그림의 로컬 디렉토리로 실행했습니다. 감사. 나는 이제 슬라이드 쇼를위한 버튼을 만들려고 노력 중이다. 다음 슬라이드, 이전 슬라이드, 일시 중지, 슬라이드 쇼의 실제 버튼을 재생할 수있는 CSS 또는 HTML을 사용하는 방법이 있습니까? –

요즘에는 전환으로 CSS를 사용하고 있습니다. 인터넷 검색을 제안합니다. 잡을 기차가 있습니다. 서비스의 기쁜 :) – Joeppie

나는 구글을보아야한다, 고마워! –

자바 스크립트 슬라이드 쇼 문제 해결

답변

관련 문제