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 that you have read and understand our privacy policy and code of conduct.

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