主页 / 问题 / 1278334
Accepted
mat
Asked:2022-05-05 18:39:50 +0000 UTC2022-05-05 18:39:50 +0000 UTC

js滑块事件

  • 772

'use strict';

const slider = document.querySelector('[data-id="viewer"]');
const photoSlider = slider.querySelector('[data-id="photo"]');
const prevButton = slider.querySelector('[data-action="prev"]');
const nextButton = slider.querySelector('[data-action="next"]');

const photos = [
    { id: 1, src: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png', alt: 'Title 1', },
    { id: 2, src: 'https://www.apple.com/newsroom/images/values/corporate/Apple_google-partner-on-covid-19-contact-tracing-technology_04102020_LP_hero.jpg.og.jpg', alt: 'Title 2', },
    { id: 3, src: 'https://cdn.logo.com/hotlink-ok/logo-social.png', alt: 'Title 3', },
    { id: 4, src: 'https://cdn.dribbble.com/users/10882/screenshots/15172621/media/cd2246d5d0f54f9a4316bd4d276764b2.png?compress=1&resize=400x300', alt: 'Title 4', },
];

const postWidgets = {
    rootEl: slider,
    photoSlider,
    prevButton,
    nextButton,
};

function bindPhotoToViewer(photo, el) {
    photos['id'] = 1;
    el.photoSlider.src = photos.src;
    el.photoSlider.alt = photos.alt;
};


bindPhotoToViewer(photos, postWidgets);

if (photos['id'] === 1 || photos['id'] === 0) {
    prevButton.disabled = true;
} else if (photos['id'] > 1) {
    prevButton.disabled = false;
    prevButton.addEventListener('click', () => {
        photos['id']--;
    });
};


nextButton.addEventListener('click', () => {
    if (photos['id'] === 4) {
        nextButton.disabled = true;
    } else {
        photos['id']++;
    };
});
<div data-id="viewer">
    <div>
      <img data-id="photo" src="" alt="">
    </div>
    <div>
      <button data-action="prev">←</button>
      <button data-action="next">→</button>
    </div>
  </div>

它应该如何工作：

  1. 加载页面时，在查看器中加载第一张照片，“上一张”按钮被禁用
  2. 当您单击“下一张”时，第二张照片被加载，“上一张”按钮被启用
  3. 以此类推，直到我们到达最后一张照片（即，我们单击“下一个”3 次），到达那里后，“下一个”按钮被禁用
  4. 反过来也一样
javascript

1 个回答

  1. Best Answer

    稍微简化。

    'use strict';

const slider = document.querySelector('[data-id="viewer"]');
const photoSlider = slider.querySelector('[data-id="photo"]');
const prevButton = slider.querySelector('[data-action="prev"]');
const nextButton = slider.querySelector('[data-action="next"]');

const photos = [
    { id: 1, src: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png', alt: 'Title 1', },
    { id: 2, src: 'https://www.apple.com/newsroom/images/values/corporate/Apple_google-partner-on-covid-19-contact-tracing-technology_04102020_LP_hero.jpg.og.jpg', alt: 'Title 2', },
    { id: 3, src: 'https://cdn.logo.com/hotlink-ok/logo-social.png', alt: 'Title 3', },
    { id: 4, src: 'https://cdn.dribbble.com/users/10882/screenshots/15172621/media/cd2246d5d0f54f9a4316bd4d276764b2.png?compress=1&resize=400x300', alt: 'Title 4', },
];

const postWidgets = {
    rootEl: slider,
    photoSlider,
    prevButton,
    nextButton,
};

function bindPhotoToViewer(photo, el) {
    el.photoSlider.src = photo.src;
    el.photoSlider.alt = photo.alt;
    prevButton.disabled = current == 0
    nextButton.disabled = current == photos.length - 1;

};
let current = 0;
bindPhotoToViewer(photos[current], postWidgets);

prevButton.disabled = true;
prevButton.addEventListener('click', () => {
    current--;
    bindPhotoToViewer(photos[current], postWidgets);
});

nextButton.addEventListener('click', () => {
    current++;
    bindPhotoToViewer(photos[current], postWidgets);

});
    <div data-id="viewer">
    <div>
      <img data-id="photo" src="" alt="">
    </div>
    <div>
      <button data-action="prev">←</button>
      <button data-action="next">→</button>
    </div>
  </div>

    • 1

相关问题