HTML Javascript 圖片 slider - 添加幻燈片動畫/

Question

我制作了一張有效的圖像 slider，但現在我正在嘗試為其添加 animation 效果，我相信 JavaScript 可能是解決該問題的答案。

我正在嘗試添加單擊箭頭按鈕並讓圖像向左或向右滑動的可能性，具體取決於單擊的是左箭頭還是右箭頭。

那可能嗎。

這是我的 HTML 文件。

<body>

  <div id="hcg-slider-1" class="hcg-slider">
    <div class="hcg-slide-container">
      <div class="hcg-slider-body">
        <a class="hcg-slides animated" style="display:block">
          <span class="hcg-slide-number">1/5</span>
          <img src="https://www.html-code-generator.com/images/slider/1.png" alt="image 1">
          <span class="hcg-slide-text">image 1</span>
        </a>
      </div>
      <a class="hcg-slide-prev" href="#">❮</a>
      <a class="hcg-slide-next" href="#">❯</a>
    </div>
    <div class="hcg-slide-dot-control"></div>
    </div>
    
    
    <script>
  
      (function(){
      //If you want to include more images, add the link name and URL of the image in the array list below.
        let images_list = [
          {"url":"photos/headers/ABY-header.png",
          "link":"", 
          "name": "just text"},

          {"url":"photos/headers/TMN-header.png",
          "link":"", 
          "name": "just text"},


          {"url":"photos/headers/TW-header.png",
          "link":"", 
          "name": "just text"},


          {"url":"photos/headers/NY-header.png",
          "link":"", 
          "name": "just text"},
         





        ];
        let slider_id = document.querySelector("#hcg-slider-1");
        
// append all images
let dots_div = "";
let images_div = "";
for (let i = 0; i < images_list.length; i++) {
  // if no link without href="" tag
  let href = (images_list[i].link == "" ? "":' href="'+images_list[i].link+'"');
  images_div += '<a'+href+' class="hcg-slides animated"'+(i === 0 ? ' style="display:block"':'')+'>'+
          '<span class="hcg-slide-number">'+(i+1)+'/'+images_list.length+'</span>'+
          '<img src="'+images_list[i].url+'" alt="'+images_list[i].name+'">'+
          '<span class="hcg-slide-text">'+images_list[i].name+'</span>'+
         '</a>';
  dots_div += '<span class="hcg-slide-dot'+(i === 0 ? ' dot-active':'')+'" data-id="'+i+'"></span>';
}



slider_id.querySelector(".hcg-slider-body").innerHTML = images_div;
slider_id.querySelector(".hcg-slide-dot-control").innerHTML = dots_div;

let slide_index = 0;

let images = slider_id.querySelectorAll(".hcg-slides");
let dots = slider_id.querySelectorAll(".hcg-slide-dot");
let prev_button = slider_id.querySelector(".hcg-slide-prev");
let next_button = slider_id.querySelector(".hcg-slide-next");

function showSlides() {
  if (slide_index > images.length-1) {
    slide_index = 0;
  }
  if (slide_index < 0) {
    slide_index = images.length-1;
  }
  for (let i = 0; i < images.length; i++) {
    images[i].style.display = "none";
    dots[i].classList.remove("dot-active");
    if (i == slide_index) {
      images[i].style.display = "block";
      dots[i].classList.add("dot-active");
    }
  }
}

prev_button.addEventListener("click", function(event) {
  event.preventDefault();
  slide_index--;
  showSlides();
}, false);

next_button.addEventListener("click", function(event){
  event.preventDefault();
  slide_index++;
  showSlides();
}, false);

function dot_click(event) {
  slide_index = event.target.dataset.id;
  showSlides();
}

for (let i = 0; i < dots.length; i++) {
  dots[i].addEventListener("click", dot_click, false);
}
})();
</script>

Answer 1

我設法使用 JavaScript 添加了一個滑動 animation。這里有一個關於如何完成的很好的指南。

https://www.cssscript.com/animated-image-slider/

這是我添加的代碼。

    const content = document.querySelector(".content");
const slider = document.querySelector(".slider");
const sliderImage = Array.from(document.querySelectorAll(".slider-image"));
const btnChevron = document.querySelectorAll(".btn-chevron");
let i = 0;

let reset = (container, clase) => {
    container.forEach(item => item.classList.remove(clase));
}

let createInfo = text => {
    const sliderInfo = document.createElement("p");
    sliderInfo.className = "slider-info";
    sliderInfo.textContent = text;
    content.appendChild(sliderInfo);
};

let createIndicators = () => {
    const container = document.createElement("div");
    container.className = "indicator";
    content.appendChild(container)
    sliderImage.forEach(image => {
        let indicator = document.createElement("p");
        indicator.textContent = sliderImage.indexOf(image) + 1;
        container.appendChild(indicator);
    })
}

let Image = (index) => {
    const indicators = document.querySelectorAll('.indicator p');
    const sliderInfo = document.querySelector('.slider-info');
    sliderImage[index].classList.add('slider-image-active');
    reset(indicators, 'indicator-active');

    indicators[i].classList.add('indicator-active');
    
    if (content.hasElement(".slider-info")) return sliderInfo.textContent = sliderImage[index].dataset.info;
    createInfo(sliderImage[index].dataset.info);   
}

let setPosition = (index) => {
    let width = sliderImage[index].getBoundingClientRect().width;
    slider.style.transform = `translateX(-${width * index}px)`;
}

let moveImage = () => {
    if (i === sliderImage.length) {
        i = 0; // Si el contador ya llego al ultimo item, lo manda al primer item.
    } else if (i == -1) {
        i = sliderImage.length - 1; // Si llego al primero lo manda hasta el ultimo.
    }
    reset(sliderImage, 'slider-image-active');
    setPosition(i);
    Image(i);
};

btnChevron.forEach(btn => {
    btn.addEventListener('click', () => {
        if (btn.dataset.action == "right") {
            i++;
            return moveImage();
        }
        i--;
        return moveImage();
    })
})

createIndicators();
Image(i);

HTML Javascript 圖片 slider - 添加幻燈片動畫/

問題描述

1 個解決方案

解決方案1
0 已采納

HTML Javascript 圖片 slider - 添加幻燈片動畫/

問題描述

1 個解決方案

解決方案1 0 已采納

解決方案1
0 已采納