堆栈内存溢出
  简体   繁体   English

使用 JS 数组创建一个简单的图像轮播

[英]Creating a Simple image carousel using JS Array

 原文  2022-07-16 07:20:55  2   3    javascript/ html/ carousel

问题描述

I created a simple carousel using HTML, CSS, and Javascript.我使用 HTML、CSS 和 Javascript 创建了一个简单的轮播。

Clicking the left button shows the previous slide and the right one shows the next slide.单击左侧按钮显示上一张幻灯片，右侧按钮显示下一张幻灯片。 But my concern is that slide change is not working correctly when clicking the next button: After the final slide, it won't go to the first slide again.但我担心的是单击下一个按钮时幻灯片更改无法正常工作：在最后一张幻灯片之后，它不会再次转到第一张幻灯片。 when clicking the previous button: After the first slide, it won't go again to last the slide again.单击上一张按钮时：在第一张幻灯片之后，它不会再次转到上一张幻灯片。

So please review my code and let me know my error.所以请检查我的代码并让我知道我的错误。 

 let right = document.querySelector('.nxt'); let left = document.querySelector('.pre'); let slids = document.querySelector('.slids'); let first = document.querySelector('.first'); let scond = document.querySelector('.scond'); let third = document.querySelector('.third'); let fouth = document.querySelector('.fouth'); let slidesArray=[first,scond,third,fouth]; let index= 0; let activeSlide= slidesArray[index].classList.add('active'); left.addEventListener('click',()=>{ if (++index > 0) { slidesArray[index].classList.add('active'); } }); right.addEventListener('click',()=>{ if (index > 0) { slidesArray[index].classList.add('deactive'); slidesArray[--index].classList.add('active'); } });
 body{ display: flex; justify-content: center; align-items: center; } .slids>*{ position: absolute; top: 50%; left: 50%; transform: translate(-50% ,-50%); width: 400px; height: 350px; font-size: 50px; font-weight: 600; display: grid; place-items: center; border-radius: 20px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; visibility: hidden; } .active{ visibility: visible; } .first{ background-color: #F7EC09; } .scond{ background-color: #3EC70B; } .third{ background-color: #3B44F6; } .fouth{ background-color: #A149FA; } .btn{ position: absolute; top: 50%; left: 50%; transform: translate(-50% ,-50%); display: flex; gap: 450px; } .nxt, .pre{ font-size: 100px; font-weight: 700; background: none; border: none; cursor: pointer; }
 <body> <div class="slids"> <div class="first">1</div> <div class="scond">2</div> <div class="third">3</div> <div class="fouth">4</div> </div> <div class="btn"> <button class="nxt">&lt;</button> <button class="pre">&gt;</button> </div>

3 个解决方案

解决方案1
 1  2022-07-16 09:39:36

A chained ternary expression can be used to determine the new index number in a single line:链式三元表达式可用于确定单行中的新索引号：

to = to >= size ? 0 : to < 0 ? size - 1 : to;

Details are commented in example细节在例子中注释

 // Reference the buttons let next = document.querySelector('.next'); let prev = document.querySelector('.prev'); /* Collect all div.slide into an array Define the array's size Define a number value outside of the function */ let slides = [...document.querySelectorAll('.slide')]; let size = slides.length; let index = 0; // Bind click event to button.prev prev.onclick = event => move(index - 1); // Bind click event to button.next next.onclick = event => move(index + 1); /* Pass newest index number Ternary expression: If the given number is greater than or equal to size of the array... ...return 0... ...If the given number is less than 0... ...return last index of array... ...otherwise return the given number Toggle the current .slide.active and new .slide Assign index as the given number */ function move(to) { to = to >= size ? 0 : to < 0 ? size - 1 : to; slides[index].classList.toggle("active"); slides[to].classList.toggle("active"); index = to; }
 html { font: 300 3vmin/1 Consolas; } body { display: flex; justify-content: center; align-items: center; } main { display: flex; justify-content: center; align-items: center; position: relative; max-width: max-content; min-height: 100vh; } .slides { display: flex; justify-content: center; align-items: center; position: relative; width: 420px; height: 400px; overflow: hidden; } .slide { display: grid; place-items: center; position: absolute; top: 50%; left: 50%; width: 400px; height: 350px; border-radius: 20px; font-size: 50px; font-weight: 600; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; visibility: hidden; transform: translate(-50%, -50%); } .active { visibility: visible; } .slide:first-of-type { background-color: #F7EC09; } .slide:nth-of-type(2) { background-color: #3EC70B; } .slide:nth-of-type(3) { background-color: #3B44F6; } .slide:nth-of-type(4) { background-color: #A149FA; } .ctrl { display: flex; justify-content: space-between; position: absolute; top: 45%; left: 45%; width: 150%; transform: translate(-50%, -50%); } .next, .prev { border: none; font-size: 100px; font-weight: 700; background: none; cursor: pointer; }
 <main> <section class="slides"> <div class="slide active">1</div> <div class="slide">2</div> <div class="slide">3</div> <div class="slide">4</div> </section> <menu class="ctrl"> <button class="prev">&lt;</button> <button class="next">&gt;</button> </menu> </main>

解决方案2
 0  2022-07-16 07:54:37

You need to reset the index of the slide when you click next and reach to maximum slide you need to reset index to 0 to return to first slide, also when you click prev and you in the first slide, you need to reset index to 3 to return the last slide.单击下一张并达到最大幻灯片时需要重置幻灯片的索引，您需要将索引重置为0以返回第一张幻灯片，同样，当您单击上一张并且您在第一张幻灯片中时，您需要将索引重置为3返回最后一张幻灯片。 

 let right = document.querySelector(".nxt"); let left = document.querySelector(".pre"); let slids = document.querySelector(".slids"); let first = document.querySelector(".first"); let scond = document.querySelector(".scond"); let third = document.querySelector(".third"); let fouth = document.querySelector(".fouth"); const elementsArr = [first, scond, third, fouth]; let slidesArray = [first, scond, third, fouth]; let index = 0; let activeSlide = slidesArray[index].classList.add("active"); left.addEventListener("click", () => { if (index === 3) { index = -1; } index++; resetActiveElements() }); right.addEventListener("click", () => { if (index === 0) index = 4; index--; resetActiveElements() }); const resetActiveElements = () => { elementsArr.forEach((element, i) => { if (index === i) { element.classList.add("active"); } else { element.classList.remove("active"); } }); }
 body{ display: flex; justify-content: center; align-items: center; } .slids>*{ position: absolute; top: 50%; left: 50%; transform: translate(-50% ,-50%); width: 400px; height: 350px; font-size: 50px; font-weight: 600; display: grid; place-items: center; border-radius: 20px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; visibility: hidden; } .active{ visibility: visible; } .first{ background-color: #F7EC09; } .scond{ background-color: #3EC70B; } .third{ background-color: #3B44F6; } .fouth{ background-color: #A149FA; } .btn{ position: absolute; top: 50%; left: 50%; transform: translate(-50% ,-50%); display: flex; gap: 450px; } .nxt, .pre{ font-size: 100px; font-weight: 700; background: none; border: none; cursor: pointer; }
 <body> <div class="slids"> <div class="first">1</div> <div class="scond">2</div> <div class="third">3</div> <div class="fouth">4</div> </div> <div class="btn"> <button class="nxt">&lt;</button> <button class="pre">&gt;</button> </div>

解决方案3
 0  

/* <div class="btn">
  <button class="pre">&lt;</button>
  <button class="nxt">&gt;</button>
</div> */

let right = document.querySelector('.nxt');
let left = document.querySelector('.pre');

let slids = document.querySelector('.slids');



let first = document.querySelector('.first');
let scond = document.querySelector('.scond');
let third = document.querySelector('.third');
let fouth = document.querySelector('.fouth');



let slidesArray = [first, scond, third, fouth];


let index = 0;

let activeSlide = slidesArray[index].classList.add('active');

left.addEventListener('click', () => {
    slidesArray[index].classList.remove('active');
    if (index == 0) {
        index = 3;
        slidesArray[index].classList.add('active');
    } else {
        index--;
        slidesArray[index].classList.add('active');
    }

});

right.addEventListener('click', () => {

    slidesArray[index].classList.remove('active');
    if (index == 3) {
        index = 0;
        slidesArray[index].classList.add('active');
    } else {
        index++;
        slidesArray[index].classList.add('active');
    }

});

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在 JS 中创建轮播 - Creating a Carousel in JS Vanilla JS 中的图像轮播 - Image Carousel in Vanilla JS 优化 Angular 8 中的简单图像轮播 - Optimize simple image carousel in Angular 8 简单的 JS 轮播需要建议 - Simple JS carousel need advice 使用引导程序创建轮播 - creating carousel using bootstrap 如何使用 HTML、JS 和 CSS 自动执行图像轮播？ - How do you automate an image carousel using HTML, JS, & CSS? Vue JS Hooper Image Carousel 问题（在 NuxtJS 项目中使用） - Vue JS Hooper Image Carousel Issue (using in NuxtJS project) 使用JS创建格式化的数组 - creating a formatted array using JS 使用js数组进行循环制作每个网格3张幻灯片的轮播 - Building carousel with 3 slides per grid using js array for loop 使用Hammer JS作为轮播 - Using Hammer JS as a carousel
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM