Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.08.2020, 17:02
Новичок на форуме
Отправить личное сообщение для Alexkor5 Посмотреть профиль Найти все сообщения от Alexkor5
 
Регистрация: 30.08.2020
Сообщений: 6

Помогите придумать логику к движению в правую сторону.
Бесконечное движение слайдов с разной шириной я сделал, но возникли проблемы как сделать тоже самое на другую сторону с привязкой к шагу. Что-то делаю и сразу натыкаюсь на проблемы, которые не могу решить.
Помогите хотя бы чисто теоретически что надо сделать, если нет времени исправлять.
Предупреждаю мой код является не оптимизированным.
Мне нужно решить проблему, а тогда я сам этим займусь.
let init = () => {
    btnLeft = document.getElementById('btnLeft');
    btnRight = document.getElementById('btnRight');
    slides = document.querySelectorAll('.slide');
    slider = document.querySelector('.slider');
    sliderWidth = document.querySelector('.slider').clientWidth;
    step = 0;
    step_2 = 0;
    step_move = 0;
    offset = 0;
    elemsDraw = []; //array of widths for draw
    elemsDraw_2 = []; //array of widths for draw
    newArrRep = [];
    screenElems = [];
    arrWidths = []; // array of width for move
    arrWidths_2 = []; // array of width for move
 
    let moveLeft = () => {
        elems = document.querySelectorAll('.slide');
        let fillGap = () => {
            elems = document.querySelectorAll('.slide');
            let sum = 0;
            for (let i = 0; i < elems.length; i++) {
                sum += elems[i].clientWidth;
            }
            sum -= elems[0].clientWidth;
 
            if (sum < sliderWidth) {
                drawRight();
                fillGap();
                elems = document.querySelectorAll('.slide');
            } else {
                elems = document.querySelectorAll('.slide');
                return;
            }
        }
        fillGap();
        if (step_move > slides.length - 1) { step_move = 0 };
 
        for (let i = 0; i < elems.length; i++) {
            current_position = elems[i].offsetLeft;
            elems[i].style.left = current_position - elems[step_move].clientWidth + 'px';
 
        }
        newArrRep.push(elems[step_move].clientWidth);
 
        setTimeout(() => {
            elems[0].remove();
            step_move--;
        }, 1000);
 
        step_move++;
    }
 
    let drawRight = () => {
        let gapRight = 0;
        if (document.querySelectorAll('.slide')) {
            [...elemsDraw].forEach((elem) => {
                gapRight += elem;
            });
        }
 
        if (step > slides.length - 1) { step = 0 };
 
        let repairReal = 0;
        for (let i = 0; i < newArrRep.length; i++) {
            repairReal += newArrRep[i];
        }
        slides[step].style.left = (gapRight - repairReal) + "px";
        slider.append(slides[step]);
        arrWidths.push(slides[step].clientWidth);
        let widthPush = slides[step].clientWidth;
        elemsDraw.push(widthPush);
        step++;
    }
 
    let checkingGap = () => {
        let elems = document.querySelectorAll('.slide');
        let allWidth = 0;
        elems.forEach((element) => {
            allWidth += element.clientWidth;
        });
        if (allWidth < sliderWidth) {
            drawRight();
            checkingGap();
        } else {
            return;
        }
    };
 
    let actionLeft = () => {
        drawRight();
        checkingGap();
        moveLeft();
    }
  
 
    let main = (() => {
        slides.forEach((element) => {
            element.remove();
        });
        checkingGap();
 
        btnLeft.onclick = () => {
            actionLeft();
        }
        btnRight.onclick = () => {
           
        }
 
    })();
}//end of init
window.addEventListener('load', init, false);

<body>
    <div class="slider">
            <div class="slide w168px"></div>
            <div class="slide w250px"></div>
            <div class="slide w80px"></div>
            <div class="slide w280px"></div>
            <div class="slide w150px"></div>
            <div class="slide w52px"></div>
    </div>
 
    <div class="buttons">
        <button id="btnLeft">Left</button>
        <button id="btnRight">Right</button>
    </div>
   
    <script src="script.js"></script>
</body>

Код:
*{
    margin:0px;
    padding:0px;
}
.bs{
    border:2px solid rgb(81, 243, 17);
}
.buttons{
    width:200px;
    margin:0px auto;
    display: flex;
    flex-flow: row wrap;
}
.buttons button{
    width:50%;
    padding:20px;
}
.slider{
    width:300px;
    height:300px;
    border:4px solid grey;
    margin:100px auto;
    position: relative;
}
.slide{
    transition:all 1s ease-in-out 0s;
}
.w168px{
  
    width:168px;
    height:300px;
    background-color: rgb(231, 84, 84);
    position: absolute;
    top:0px;
    left:0px;
}
.w250px{
    width:250px;
    height:300px;
    background-color: rgb(38, 129, 214);
    position: absolute;
    top:0px;
    left:0px;
}
.w80px{
   
    width:80px;
    height:300px;
    background-color: seagreen;
    position: absolute;
    top:0px;
    left:0px;
}
.w280px{
 
    width:280px;
    height:300px;
    background-color: rgb(48, 93, 197);
    position: absolute;
    top:0px;
    left:0px;
}
.w150px{
  
    width:150px;
    /* width:20px; */
    height:300px;
    background-color: rgb(235, 216, 40);
    position: absolute;
    top:0px;
    left:0px;
}
.w52px{
   
    width:52px;
    height:300px;
    background-color:rgb(255, 129, 150);
    position: absolute;
    top:0px;
    left:0px;
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите понять логику ShutTap Общие вопросы Javascript 15 10.12.2014 08:34
Как плавно пролистать страницу вправо при наведении курсора в правую сторону? Orkhan Элементы интерфейса 2 11.04.2013 12:14
Помогите понять логику программы newprogramm Общие вопросы Javascript 4 22.10.2012 10:43
Помогите придумать zasranic Работа 10 07.09.2011 16:12