Как исправить Uncaught SyntaxError: Unexpected identifier?

176
04 октября 2018, 05:30

var slides = ['<div id = ' 
  slide1 '>первый слайд<br><img src = ' 
  1. jpg '></div>', 
  '<div id = ' 
  slide2 '>второй слайд<br><img src = ' 
  2. jpg '></div>', 
  '<div id = ' 
  slide3 '>третий слайд<br><img src = ' 
  3. jpg '></div>' 
]; 
var currentSlide = 0; 
var numberOfSlides = slides.length - 1; 
window.onload = loader; 
 
function loader() { 
  changeImage(); 
} 
 
function changeImage() { 
  if (currentSlide > numberOfSlides) { 
    currentSlide = 0; 
  } 
  document.getElementById('slideshow').innerHTML = slides[currentSlide]; 
  currentSlide++; 
  setTimeout(changeImage, 1000); 
}
#slideshow { 
  position: absolute; 
  width: 800px; 
  height: 400px; 
  top: 100px; 
  left: 100px; 
  display: hidden; 
}
<div id='slideshow'></div>

Рабочая программа должна показывать слайдшоу из трёх картинок, но почему-то в массиве "slides" возникает ошибка

Uncaught SyntaxError: Unexpected identifier

хотя вроде бы всё должно работать.

Answer 1

Uncaught SyntaxError: Unexpected identifier

Экранировать надо ' "your-image" ' или слэшами обратными ' \' your-image \' ', как то так:

var slides = ['<div id = "slide1">первый слайд<br><img src = "//picsum.photos/200/300"></div>', 
  '<div id = "  slide2 ">второй слайд<br><img src = "//picsum.photos/200/301"></div>', 
  '<div id = "  slide3 ">третий слайд<br><img src = "//picsum.photos/200/302"></div>' 
]; 
var currentSlide = 0; 
var numberOfSlides = slides.length - 1; 
window.onload = loader; 
 
function loader() { 
  changeImage(); 
} 
 
function changeImage() { 
  if (currentSlide > numberOfSlides) { 
    currentSlide = 0; 
  } 
  document.getElementById('slideshow').innerHTML = slides[currentSlide]; 
  currentSlide++; 
  setTimeout(changeImage, 1000); 
}
#slideshow { 
  position: absolute; 
  width: 800px; 
  height: 400px; 
  top: 100px; 
  left: 100px; 
  display: hidden; 
}
<div id='slideshow'></div>

READ ALSO
Возможно ли так сделать?

Возможно ли так сделать?

Возможно ли сделать такие границы у блоков без использования фоновых картинок?

174
Как сделать подобное javascript?

Как сделать подобное javascript?

Есть такая функция:

172
Canvas HTML5 JavaScript

Canvas HTML5 JavaScript

Всем привет, подскажите, пожалуйста, как сделать, чтобы эта анимация, была не просто посередине, а "следила" за курсором? Заранее спасибо

166
Как можно сверстать данную часть панели навигации? И это не хедер

Как можно сверстать данную часть панели навигации? И это не хедер

Проблема в том, что я не понимаю как "Блог" разместить на одном уровне с остальными кнопками менюЗаранее прошу прощения за нубский вопрос

152