Как сделать так, чтобы текст и изображение изменялись в JavaScript внутри слайдера? - PullRequest
Новая
       33

Как сделать так, чтобы текст и изображение изменялись в JavaScript внутри слайдера?

0 голосов
/ 30 сентября 2019

У меня есть этот код здесь: https://codepen.io/double_milkshake/pen/VwZJjgq

const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');

const textElement = document.querySelector(".text");


let counter = 0;

nextBtn.addEventListener('click',nextSlide);
prevBtn.addEventListener('click',prevSlide);

function nextSlide() {



    container.animate([{opacity: '0.1'},{opacity: '1.0'}],{duration:500, fill: 'forwards'});

    if(counter === 4) {
        counter = -1;
    }

    counter++;

    container.style.backgroundImage = `url(img/bcg-${counter}.png)`


}


function prevSlide() {

    container.animate([{opacity: '0.1'},{opacity: '1.0'}],{duration:1000, fill: 'forwards'});

    if(counter === 0) {
        counter = 5;
    }

    counter--;

    container.style.backgroundImage = `url(img/bcg-${counter}.png)`

}

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

Теперь я хотел бы изменить текст, также щелкая. Но не знаю, с чего начать, может быть, у вас, ребята, есть идеи?

Также есть предложения, что делать, если я не знаю, сколько изображений в моей папке. В настоящее время они жестко запрограммированы на 5.

Большое спасибо!

1 Ответ

0 голосов
/ 30 сентября 2019

HTML-разметка: 

<div class="text" id="caption">
  This is image 1
</div>

Javascript 

const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');

const textElement = document.querySelector(".text");


let counter = 0;

nextBtn.addEventListener('click',nextSlide);
prevBtn.addEventListener('click',prevSlide);

function nextSlide() { 

    container.animate([{opacity: '0.1'},{opacity: '1.0'}],{duration:500, fill: 'forwards'}); 

    if(counter==4)
        counter=-1;
    counter = setText(counter, "up");

    container.style.backgroundImage = `url(img/bcg-${counter}.png)`
}


function prevSlide() {

    container.animate([{opacity: '0.1'},{opacity: '1.0'}],{duration:1000, fill: 'forwards'});

    if(counter==-0)
        counter=5;
    counter = setText(counter, "down"); 

    container.style.backgroundImage = `url(img/bcg-${counter}.png)`
}

function setText(cntr, direction){

    if(direction=="up") {
        cntr++;     
    } else {
        cntr--;     
    }
    if(cntr==0){
        document.getElementById("caption").innerHTML = "This is image 1";
    } else if(cntr==1){
        document.getElementById("caption").innerHTML = "This is image 2";
    } else if(cntr==2){
        document.getElementById("caption").innerHTML = "This is image 3";
    } else if(cntr==3){
        document.getElementById("caption").innerHTML = "This is image 4";
    } else if(cntr==4){
        document.getElementById("caption").innerHTML = "This is image 5";
    } 

    return cntr;
}
...