2013-10-03 4 views
-3

Я не понимаю ... мои картины не загружать, они находятся в той же папке,Пожалуйста, помогите мне отладить этот простой javascript?

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Animal</title> 
<script type="text/javascript"> 
var i = 0; 
var timeout; 
function preLoadImages() 
{ 
if(document.images) 
{ 
animal = new Array(); 
animal[0] = new Image(); 
anmial[0] = "bear.jpg"; 
animal[1] = new Image(); 
anmial[1] = "duck.jpg"; 
animal[2] = new Image(); 
anmial[2] = "elephant.jpg"; 
animal[3] = new Image(); 
anmial[3] = "lion.jpg"; 
animal[4] = new Image(); 
animal[4] = "cat.jpg"; 
} 
else 
alert("There are no images to load"); 
} 
function startSlideShow() 
{ 
if(i < animal.length) 
{ 
document.images["animal_pic"].src = animal[i]; 
i++; 
} 
else 
{ 
i =0; 
document.images["animal_pic"].src = animal[i]; 
} 
timeout = setTimeout('startSlideSHow()', 3000); 
} 
function stopSlideShow() 
{ 
clearTimeout(timeout); 
} 
</script> 
</head> 
<body bgcolor="#FFFF00" onLoad = "preLoadImages()"> 
<img name="animal_pic" height="300" width="300"/> 
<form> 
<br/><br/> 
<input type=button value="Start Show" onClick="return startSlideShow();"/> 
<input type=button value="Stop Show" onClick="return stopSlideShow();"/></form>  
</body> 
</html> 
+1

Посмотрите на консоль разработчика в браузере. Любые ошибки JS? Какие-либо сетевые ошибки? – Thilo

+3

'animal! = Anmial' – elclanrs

+0

Отложите в сторону, почему вы назначаете каждый элемент массива дважды? – Thilo

ответ

0

Из того, что я могу быстро увидеть, вам не хватает закрывающую скобку:

animal[3] = "lion.jpg"; 
animal[4] = new Image(); 
animal[4] = "cat.jpg"; 
} else { 

Там также орфографические ошибки во имя вашего массива:

anmial[3] = ... 
animal[4] = ... 

Не забудьте сохранить ваш код аккуратным перед тестированием ...

+0

Скобка, которую вы не видите, отсутствует; кто-то просто не может отступать. Скобка после 'else' заканчивает целую функцию, а не' else'. – cHao

3

Вы создали массив животных, но сохранили значение в anmial, заклинание ошибка и вы должны установить свойство дэ Src ...

Неправильно:

animal[0] = new Image(); 
anmial[0] = "bear.jpg"; 

Правильно:

animal[0] = new Image(); 
animal[0].src = "bear.jpg"; 
+0

'animal [0] = new Изображение();' бесполезно. –

+0

@JonKoops: Вы говорите, что он не будет предварительно загружать первое изображение после правильной установки 'src'? – cHao

+0

Я говорю, если вы замените один и тот же индекс массива на другое значение, он действительно ничего не сделает с объектом Image. –

-1
animal[4] = "cat.jpg"; 
    } 
    else 
    alert("There are no images to load"); 
    } 
    function startSlideShow() 

У вас есть две закрывающиеся фигурные скобки, и ни один из них не открывается else alert( Я думаю, что вы либо измените, либо добавите открытие до

else 
alert("There are no images to load"); 

либо в открывающей фигурной скобкой или просто избавиться от него

+0

Скобки правильные. Добавление одного или удаление одного из них приведет к синтаксической ошибке. Я бы рекомендовал добавить пару фигурных скобок вокруг содержимого 'else' для согласованности, но прежде всего я бы рекомендовал, чтобы он учился правильно отступы ... что бы по крайней мере пару человек преследовали их хвосты здесь. – cHao

0

Я создал некоторый код, который должен работать:

(function() { 

    'use strict'; 

    var currentImage = 0, 
     imageElement, 
     timer, 
     images = [ 
     'bear.jpg', 
     'duck.jpg', 
     'elephant.jpg', 
     'lion.jpg', 
     'cat.jpg' 
    ]; 

    var startSlideShow = function() { 

     timer = window.setInterval(nextImage, 3000); 
    }; 

    var stopSlideShow = function() { 

     window.clearInterval(timer); 
    }; 

    var nextImage = function() { 

     currentImage++; 

     if(currentImage == images.length) { 
      currentImage = 0; 
     } 

     imageElement.src = images[currentImage]; 
    }; 

    window.addEventListener('DOMContentLoaded', function() { 

     imageElement = document.querySelector('img[name="animal_pic"]'); 
     imageElement.src = images[0]; 

     startSlideShow(); 
    }); 

})(); 

Вы действительно должны сделать некоторые основные учебники JavaScript, как там в вашем коде много ошибок. Вот некоторые предложения.

// Indent your code, JUST DO IT. 
var i = 0; 
var timeout; 
function preLoadImages() { // This function does not actually preload any images. 
if(document.images) // Why would you check if there are images in the document when you're gonna load them manually anyways? 
{ 
animal = new Array(); // Use a literal array, also use the 'var' keyword to declare a new variable. 
animal[0] = new Image(); // Why would you need this now? 
anmial[0] = "bear.jpg"; // I assume you meant 'animal', still why would you fill the same index again? 
animal[1] = new Image(); // Same as above 
anmial[1] = "duck.jpg"; // Same as above 
animal[2] = new Image(); // Same as above 
anmial[2] = "elephant.jpg"; // Same as above 
animal[3] = new Image(); // Same as above 
anmial[3] = "lion.jpg"; // Same as above 
animal[4] = new Image(); // Same as above 
animal[4] = "cat.jpg"; // Same as above 
} 
else // Missing an opening bracket 
alert("There are no images to load"); // Yes there are, regardless of document.images. 
// Missing closing bracket 
} 
function startSlideShow() 
{ 
if(i < animal.length) 
{ 
document.images["animal_pic"].src = animal[i]; 
i++; 
} 
else 
{ 
i =0; 
document.images["animal_pic"].src = animal[i]; 
} 
timeout = setTimeout('startSlideSHow()', 3000); // This should have a function as a parameter not a string, also there is a typo. 
} 
function stopSlideShow() 
{ 
clearTimeout(timeout); 
} 
+0

Ницца педантизм и nitpicking. Я отмечаю, что вы даже не пытались решить проблему. Или, если у вас есть, это провалилось жалко. – cHao

+0

Приятно видеть ваш ответ @cHao –

+0

Он попросил нас помочь в отладке, вот мои исправления. –

Смежные вопросы