-2

Я попытался сделать слайд-шоу в js и его не работает, все, что я получаю, это изображения, отображаемые на экране по порядку, а следующая и предыдущая ссылки просто отправляют меня в начало страницы. Я не могу понять, почему, я знаю решения, которые работают, но я не понимаю, почему это решение не работает. Есть много решений, которые я нашел в Интернете, которые очень похожи на этот, и они работают, но этого нет, я только недавно начал js, поэтому я представляю себе что-то глупое, которого я пропустил. Вот HTML: (редактирование: переместил в нижней части HTML тела)Слайд-шоу в формате HTML/Javascript

<html> 
<head> 
    <title></title> 
    <link type="text/css" rel="stylesheet" href="CSS/mainPageStyle.css"> 
</head> 
<body style="background-color:white"> 
    <div id="titleLogo"><h1>Custom Motorbikes</h1></div> 

    <nav> 
     <ul> 
      <li><a href="">Home</a></li> 
      <li><a href="">About Us</a></li> 
      <li><a href="">Full ride list</a></li> 
      <li><a href="">Custom ride</a></li> 
      <li><a href="">Contact Us</a></li> 
      <li><a href="">Login</a></li> 
      <li><a href="">Register</a></li> 
     </ul> 
    </nav> 

    <!-- front page slideshow: --> 

    <img src="images/bikePerson.jpg" class="slides" style="width:100%" /> 
    <img src="images/bikePersonCountry.jpg" class="slides" style="width:100%" /> 
    <img src="images/bikeRoad.jpg" class="slides" style="width:100%" /> 

    <a href="#" onclick="changeImage(1); return false;">Next Slide</a> <br/> 
    <a href="#" onclick="changeImage(-1); return false;">Previous Slide</a> 


    <!-- front page slideshow --> 
<script type="text/javascript" src='JS/slideshow.js'></script> 
</body> 
</html>

здесь является ЯШ:

var imgPos = 0; 
var changeImage(0);      //called so that images(except first one) are hidden intially 
var imgs = document.getElementsByClassName("slides"); //creates an array, and fills it with all images with 'slides' class 
var arrayLength = imgs.length; 

function changeImage(x) { 
    var i = 0;      //used for counting through 'for' loop 
    imgPos += x;     //x will be either -1 or +1 

    if (imgPos > arrayLength){  //if user goes beyond last img 
     imgPos = 0;     //go to first img 
    } 
    if (imgPos < 0){     //if user goes before first img 
     imgPos = arrayLength;  //go to furthest img 
    } 
    for (i = 0; i < arrayLength; i++){ 
     imgs[i].style.display = "none";  //this hides all the images 
    } 
    imgs[imgPos].style.display = "block"; //this then displays the image we want to see 

    return false; 
}

Здесь находятся ошибки:

Uncaught TypeError: Cannot read property '0' of undefined(…) slideshow.js:22

Uncaught TypeError: Cannot read property '1' of undefined(…)

источник

2016-11-05 L.Taylor

насчет слайд-шоу не работает? «Не работает» не очень полезно, что не работает. –

Убедитесь, что ваш javascript запускается после загрузки html. Обычно вы можете переместить свой тег сценария в конец тела html, чтобы гарантировать, что теги img существуют до запуска вашего скрипта. – thgaskell

LIke @thgaskell говорит, что ваш js работает до вашего html, поэтому 'document.getElementsByClassName (« слайды »);' ничего не обнаруживает, потому что DOM еще не загружен. –

Метод 1 (Переместите js на нижнюю часть)

Это будет работать после того, как вы загрузите все из вас.

<html> 
<head> 
    <title></title> 
    <link type="text/css" rel="stylesheet" href="CSS/mainPageStyle.css"> 
</head> 
<body style="background-color:white"> 
    <div id="titleLogo"><h1>Custom Motorbikes</h1></div> 

    <nav> 
     <ul> 
      <li><a href="">Home</a></li> 
      <li><a href="">About Us</a></li> 
      <li><a href="">Full ride list</a></li> 
      <li><a href="">Custom ride</a></li> 
      <li><a href="">Contact Us</a></li> 
      <li><a href="">Login</a></li> 
      <li><a href="">Register</a></li> 
     </ul> 
    </nav> 

    <!-- front page slideshow: --> 

    <img src="images/bikePerson.jpg" class="slides" style="width:100%" /> 
    <img src="images/bikePersonCountry.jpg" class="slides" style="width:100%" /> 
    <img src="images/bikeRoad.jpg" class="slides" style="width:100%" /> 

    <a href="#" onclick="changeImage(1); return false;">Next Slide</a> <br/> 
    <a href="#" onclick="changeImage(-1); return false;">Previous Slide</a> 


    <!-- front page slideshow --> 
    <script type="text/javascript" src='JS/slideshow.js'></script> 

</body> 
</html>

Метод 2 (добавить документ готовы)

Это вызовет Dóm загружается событие после загрузки вашего дома.

Примечание: Вы не можете назначить функцию на вар var changeImage(0); Вы можете присвоить результат функции переменной, хотя: var myVar = changeImage(0);

var imgPos = 0; 
var imgs = []; 

function changeImage(x) { 
    var i = 0;      //used for counting through 'for' loop 
    imgPos += x;     //x will be either -1 or +1 

    imgPos = imgPos + 1 > imgs.length ? 0 : imgPos; 
    imgPos = imgPos < 0 ? imgs.length - 1 : imgPos; 

    for (let i = 0; i < imgs.length; i++) { 
     imgs[i].style.display = "none";  //this hides all the images 
    } 
    imgs[imgPos].style.display = "block"; //this then displays the image we want to see 
    console.log(imgs[imgPos]) 
    return false; 
} 

document.addEventListener('DOMContentLoaded', event => { 
    imgs = document.querySelectorAll("img.slides"); //creates an array, and fills it with all images with 'slides' class 
    changeImage(0);      //called so that images(except first one) are hidden intially 
});

источник

2016-11-05 22:08:43

Благодарим вас за решение, я попробовал их обоим, но все равно получаю ту же проблему –

Вы получаете какую-либо ошибку в инспекторе? –

oh да, что vars не предназначено для того, чтобы быть там –

Слайд-шоу в формате HTML/Javascript

ответ

Метод 1 (Переместите js на нижнюю часть)

Метод 2 (добавить документ готовы)

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