Слайдер не переключается js

@Ilikeit · Регистрация: 20.09.2016

Author24 — интернет-сервис помощи студентам

В чем может быть проблема?

HTML5

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="javascript.js"></script>
<title>Страница</title>
</head>
<body>
<div class="wrapper">
<ul id="slides">
    <li class="slide showing">Slide 1</li>
    <li class="slide">Slide 2</li>
    <li class="slide">Slide 3</li>
    <li class="slide">Slide 4</li>
    <li class="slide">Slide 5</li>
</ul>
</div>
</body>
</html>

CSS

* {
    margin: 0px;
    padding: 0px;
}
.wrapper {
    width: 1000px;
    height: 2000px;
    margin: 0px auto;
    background: yellow;
}
#slides{
    position: relative;
    height: 150px;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}
 
.slide{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
 
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}
 
.showing{
    opacity: 1;
    z-index: 2;
}
.slide{
    font-size: 40px;
    padding: 40px;
    box-sizing: border-box;
    background: #333;
    color: #fff;
}
 
.slide:nth-of-type(1){
    background: red;
}
.slide:nth-of-type(2){
    background: orange;
}
.slide:nth-of-type(3){
    background: green;
}
.slide:nth-of-type(4){
    background: blue;
}
.slide:nth-of-type(5){
    background: purple;
}

Javascript

var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);
 
function nextSlide(){
    slides[currentSlide].className = 'slide';
    currentSlide = (currentSlide+1)%slides.length;
    slides[currentSlide].className = 'slide showing';
}

@mrtoxas · 06.02.2017, 14:59

Все переключается. Поместите js-код перед закрывающим тегом </body>

@Ilikeit · 06.02.2017, 15:12 **[ТС]**

Ок, а как тогда сделать, чтобы код js был в документе js?

@mrtoxas · 06.02.2017, 15:22

Javascript

document.addEventListener("DOMContentLoaded", function() {
    var slides = document.querySelectorAll('#slides .slide');
    var currentSlide = 0;
    var slideInterval = setInterval(nextSlide, 2000);
    function nextSlide() {
        slides[currentSlide].className = 'slide';
        currentSlide = (currentSlide + 1) % slides.length;
        slides[currentSlide].className = 'slide showing';
    }
});

А лучше просто загружать скрипт, как я выше написал:

HTML5

1
2
3

<!-- ... -->
<script src="javascript.js"></script>
</body>

@malafala · 06.02.2017, 15:39

Ilikeit,

Javascript

;(function () {
    'use strick';
    function Slider (slideList, activeSlide, interval) {
        this.slideList = document.querySelectorAll(slideList);
    this.activeSlide = activeSlide;
        this.interval = interval;
    }
    Slider.prototype.nextSlide = function () {
        var i = 0, length = this.slideList.length - 1;
        setInterval(function () {
            this.slideList[i].classList.remove(this.activeSlide);
            if (i === length) {i = -1;}
            i++;
            this.slideList[i].classList.add(this.activeSlide);
        }.bind(this), this.interval);
    };
    var slide = new Slider('.slide', 'showing', 1000);
    slide.nextSlide();
})();

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	06.02.2017, 14:59	2
	Все переключается. Поместите js-код перед закрывающим тегом </body> 1

@Ilikeit 0 / 0 / 0 Регистрация: 20.09.2016 Сообщений: 45
	06.02.2017, 15:12 [ТС]	3
	Ок, а как тогда сделать, чтобы код js был в документе js? 0

	06.02.2017, 15:39

Слайдер не переключается js

Решение