1

проблема при работе слайдера.Изначально arrayLength у меня 0.Жму на кнопку btnRight переменная увеличивается на 1, жму на btnLeft переменная становится 2 потом обратно жму на кнопку btnRight переменная уменьшается на 1. И еще если убрать эту строку приходится нажимать два раза на кнопку первый раз при загрузке страницы window.onload = function(){nextSlide();}.(по поводу того, что изобретаю велосипед ничего не писать,знаю)

let imgArray = ['downl.png','downlo.png','downloa.png','download.png'];
    let btnLeft = document.querySelector('.left_btn'),
        btnRight = document.querySelector('.right_btn'),
        sidebg = document.getElementById('block'),
        intervalS = 2000;
        arrayLength = 0;

      window.onload = function(){
        nextSlide();
      }

      function nextSlide(){
        if(arrayLength > imgArray.length-1){
          arrayLength = 0;
        }
        else if(arrayLength < 0){
          arrayLength = imgArray.length-1;
        }
        console.log(arrayLength);
        sidebg.style.backgroundImage = "url(" + imgArray[arrayLength++] + ")";
      }

      function prevButton(){
        if(arrayLength < 0){
          arrayLength = imgArray.length-1;
        }
        else if(arrayLength > imgArray.length-1){
          arrayLength = 0;
        }
          console.log(arrayLength);
          sidebg.style.backgroundImage = "url(" + imgArray[arrayLength--] + ")";
      }
      btnRight.onclick = function(){
        nextSlide();

      }
      btnLeft.onclick = function(){
        prevButton();
      }

2 ответа 2

0

оператор arrayLength++, как и arrayLength-- в начале возвращает значение, а уже потом преобразует его (увеличивает или уменьшает)

Вам следует воспользоваться ++arrayLength и --arrayLength. Они напротив в начале преобразуют значение переменной, а уже потом возвращают.

p.s. про костыли просили не писать, поэтому не пишу)

1
  • спасибо, помогло. не нашел ничего годного про создание слайдера с нормальным объяснением поэтому решил свои костыли собрать,сделал все что смог. расскажи что не так 28 мар 2020 в 18:11
0

Могу закрепить пример.

Это домашка одного из наших студентов, здесь все достаточно хорошо и качественно выполнено.

p.s. картинки я сюда грузить не стал)

HTML

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/main.css">
    <title>Vasilyev Home 20</title>
</head>

<body>
    <div id="root1">
        <div id="root2">
            <div id="root"></div>
        </div>
    </div>

    <script src="script/script.js"></script>
</body>

</html>

SASS

* 
  box-sizing: border-box
  margin: 0
  padding: 0

#root1
    margin: 200px 10% 0 10%
    width: 80%
    overflow: hidden
    border-radius: 10px
    #root2 
        width: 100%
        padding-bottom: 40%
        position: relative
        background-image: url(../img/back.jpg)
        background-repeat: round

#root
    position: absolute
    width: 100%
    height: 100%
    display: flex
    justify-content: center
    align-items: center
    .galContainer
        width: 85%
        overflow: hidden
        margin: 0 auto
        position: relative
        display: flex
        align-items: center   
        .film
            display: flex
            align-items: flex-start
            transition: margin-left 1s // margin-left СТОИТ указать!!!
            color: black
            .card
                position: relative
                height: 200px
                color: white
                padding: 5px
                font-size: 20px
                .face
                    width: 100px
                    height: 100px
                    border-radius: 50%
                    overflow: hidden
                    position: absolute
                    top: 15%
                    left: 5px
                .name
                    position: absolute
                    bottom: 15%
                    width: 100px
                    text-align: center
                .quote
                    position: absolute
                    top: 15%
                    left: 120px
                .text
                    position: absolute
                    bottom: 15%
                    left: 120px
    .pointContainer
        position: absolute
        transform: translateX(-50%)
        bottom: 20px
        left: 50%
        .point
            display: inline-block
            cursor: pointer
            width: 15px
            height: 15px
            border: 2px solid white
            border-radius: 50%
            margin: 0 10px
            &:hover
                background-color: darkgrey
                border: none
        .active
            background-color: white
    .leftBtn, .rightBtn
        position: absolute
        top: 40%
        height: 20%
        user-select: none
        font-size: 60px
        font-weight: bold
        color: white
        cursor: pointer
        display: flex
        justify-content: center
        align-items: center
        &:hover
            color: darkgrey
    .leftBtn
        left: 5px
    .rightBtn
        right: 5px

@media screen and (max-width: 1550px)

    #root
        .galContainer 
            .film
                .card
                    font-size: 18px

@media screen and (max-width: 1200px)

    #root
        .galContainer 
            .film
                .card
                    height: 220px
                    font-size: 16px


@media screen and (max-width: 970px)

    #root
        .galContainer 
            .film
                .card
                    height: 300px
                    .face
                        top: 25%
                    .name                   
                        bottom: 25%
                    .quote
                        top: 20%
                    .text
                        bottom: 20%
        .pointContainer
            bottom: 5px

@media screen and (max-width: 750px)

    #root
        .galContainer 
            .film
                .card
                    height: 250px
                    font-size: 14px
                    .face
                        top: 30%
                        width: 75px
                        height: 75px
                        img
                            width: 75px
                    .name                   
                        bottom: 30%
                        width: 75px
                    .quote
                        top: 20%
                        left: 85px
                    .text
                        bottom: 20%
                        left: 85px
        .pointContainer
            bottom: 5px
        .leftBtn, .rightBtn
            font-size: 40px

@media screen and (max-width: 660px)

    #root
        .galContainer 
            .film
                .card
                    height: 210px
                    font-size: 11px
                    .face
                        top: 30%
                        width: 50px
                        height: 50px
                        img
                            width: 50px
                    .name                   
                        bottom: 30%
                        width: 50px
                    .quote
                        top: 20%
                        left: 60px
                    .text
                        bottom: 20%
                        left: 60px
        .pointContainer
            bottom: 0
            .point
                width: 8px
                height: 8px
        .leftBtn, .rightBtn
            font-size: 30px

JS

let data = [{
            face: 'img/okkam.jpg',
            name: 'У.Оккам',
            quote: 'Нельзя применять многочисленности без необходимости.',
            text: 'Мы не должны принимать какое-либо положение как не подлежащее обоснованию, если только это не логический вывод, или нечто, проверенное на опыте, или же благочестивое предписание, требующее от нас поступать именно так, а не иначе…'
        },
        {
            face: 'img/show.jpg',
            name: 'Б.Шоу',
            quote: 'Бойся человека, Бог которого живёт на небесах!',
            text: 'Все автобиографии лживы. Ни один человек не может быть плох настолько, чтобы рассказать о себе при жизни правду, втянув в это дело, как того и требует правда, свою семью, друзей и коллег. И ни один человек не может быть настолько добродетельным, чтобы рассказать правду потомству в документе, который он держит при себе до тех пор, пока не останется никого, кто бы мог противоречить ему.'
        },
        {
            face: 'img/letov.jpg',
            name: 'Е.Летов',
            quote: 'Придуманным миром удобней управлять.',
            text: 'Я, знаете, очень пессимистически настроен — как-то вот не верю в то (а тем более после того, что содеяно), что всё человечество разом внезапно поумнеет и начнёт жить по-другому. Единственная надежда — на то, что выживут хотя бы несколько хороших людей, живых людей. Но я думаю, что они просто возникнут как новый этап эволюции, может, это будут вовсе и не люди. Жизнь всё равно продолжится — смерти нет.'
        },
        {
            face: 'img/berdyaev.jpg',
            name: 'Н.Бердяев',
            quote: 'Злейший враг свободы — сытый и довольный раб.',
            text: 'История лишь в том случае имеет смысл, если будет конец истории, если будет в конце воскресение, если встанут мертвецы с кладбища мировой истории и постигнут всем существом своим, почему они истлели, почему страдали в жизни и чего заслужили для вечности, если весь хронологический ряд истории вытянется в одну линию и для всего найдется окончательное место.'
        },
    ];

    let page = 0; // страница по умолчанию

    let rootElem = document.getElementById('root');
    let galContainer = document.createElement('div');
    let film = document.createElement('div');
    let pointContainer = document.createElement('div');

    galContainer.classList.add('galContainer');
    film.classList.add('film');
    pointContainer.classList.add('pointContainer');

    data.forEach(function (elem) {
        let cardElem = document.createElement('div');
        let faceElem = document.createElement('div');
        let nameElem = document.createElement('p');
        let quoteElem = document.createElement('p');
        let textElem = document.createElement('p');
        let point = document.createElement('div');

        cardElem.classList.add('card');
        faceElem.classList.add('face');
        nameElem.classList.add('name');
        quoteElem.classList.add('quote');
        textElem.classList.add('text');
        point.classList.add('point');

        faceElem.innerHTML = `<img src = '${elem.face}'>`; // это можно было бы сделать и поизящнее, не правда ли?
        nameElem.innerText = elem.name;
        quoteElem.innerText = elem.quote;
        textElem.innerText = elem.text;

        cardElem.appendChild(faceElem);
        cardElem.appendChild(nameElem);
        cardElem.appendChild(quoteElem);
        cardElem.appendChild(textElem);

        film.appendChild(cardElem);
        pointContainer.appendChild(point);
        pointListener(point); // вешаем прослушивалку на каждую point
    });

    galContainer.appendChild(film);
    rootElem.appendChild(galContainer);
    rootElem.appendChild(pointContainer);

    function pointListener(point) {
        point.addEventListener('click', function () {
            page = points.indexOf(this);
            film.style.marginLeft = `-${page}00%`;
            pointPainter();
        });
    };

    function pointPainter() { // раскрашиваем кнопки
        document.querySelector('.active').classList.remove('active');
        points[page].classList.add('active');
    };

    function resize() { // проверяем изменение ширины экрана и подгоняем размеры элементов
        film.style.width = data.length * galContainer.offsetWidth + 'px';
        document.querySelectorAll('.card')
            .forEach(elem => elem.style.width = window.innerWidth + 'px');
    };

    // ниже - элементы навигации //

    document.querySelector('.point').classList.add('active'); // вешаем active на первую point
    let points = [...document.querySelectorAll('.point')]; // отработает после data.forEach, так что всё ок

    let rightBtn = document.createElement('div');
    let leftBtn = document.createElement('div');
    rightBtn.addEventListener('click', goRight);
    leftBtn.addEventListener('click', goLeft);
    rightBtn.classList.add('rightBtn');
    leftBtn.classList.add('leftBtn');
    leftBtn.innerText = '<';
    rightBtn.innerText = '>';

    rootElem.appendChild(leftBtn);
    rootElem.appendChild(rightBtn);

    function goLeft() {
        if (page == 0) {
            return
        };
        page--;
        film.style.marginLeft = `-${page}00%`;
        pointPainter();
    };

    function goRight() {
        if (page == data.length - 1) {
            return
        };
        page++;
        film.style.marginLeft = `-${page}00%`;
        pointPainter();
    };

    window.addEventListener('resize', resize);

    resize();
1
  • Всегда пожалуйста) А вообще, у нас есть курс по web, если будет интересно, милости просим.
    – CyberEd
    29 мар 2020 в 8:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.