Question 273828 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Changing images by mouse scroll and timer

I have a code that changes images by mouse scroll, I need to add an automatic change of images if the user does not scroll within 7 seconds

<script>
const imageContainer = document.querySelector('.image-container');
const images = document.querySelectorAll('.image');
let currentIndexScroll = 0;
let isScrolling = false;
let hasScrolled = false;

function getRandomIndex(max) {
    return Math.floor(Math.random() * max);
}

document.addEventListener('wheel', (e) => {
    if (isScrolling) return;

    const delta = e.deltaY;
    const sensitivity = 40;

    if (delta > sensitivity && !hasScrolled) {
        currentIndexScroll = getRandomIndex(images.length);
        hasScrolled = true;
    } else if (delta < -sensitivity && !hasScrolled) {
        currentIndexScroll = getRandomIndex(images.length);
        hasScrolled = true;
    }

    images.forEach((image, index) => {
        if (index === currentIndexScroll) {
            image.style.opacity = 1;
        } else {
            image.style.opacity = 0;
        }
    });

    if (hasScrolled) {
        isScrolling = true;
        setTimeout(() => {
            isScrolling = false;
            hasScrolled = false;
        }, 600);
    }
});
</script>

I tried to add a timer, but the images do not change

Tags:

2

Answers


  1. 0

    Pseudo-code below:

    let timer = setInterval(scroll, 7000);

function scroll(
  if(!hasScrolled){
    // code to scroll the image here.
    
    
    hasScrolled = true;
  }
);
    Login or Signup to reply.
  2. 0

    Here’s a reusable example which uses setInverval to autoplay your images on init, and if the mouse is not hovering the images parent. Uses the Modulo operator % in a mod function to loop over the images. Uses simple functions like anim() that animates assigning an active class to the c current index image. Uses next() and prev() functions on "wheel" event to increment or decrement c current index and anim() animate to the current image. As a bonus, on click calls the next() function:

    // DOM utility functions:
const els = (sel, par) => (par || document).querySelectorAll(sel);

// Utility functions:
const mod = (n, m) => ((n % m) + m) % m; // Fix negative Modulo


// Images wheeler component:
const imagesWheeler = (elParent) => {

  const elsImages = els(".image", elParent);
  const tot = elsImages.length;
  let itv = null;
  let c = 0; // current index

  const anim = () => {
    elsImages.forEach((elImage, i) => {
      elImage.classList.toggle("is-active", i === c);
    });
  };

  const next = () => {
    c = mod(++c, tot);
    anim();
  };

  const prev = () => {
    c = mod(--c, tot);
    anim();
  };

  const play = () => {
    itv = setInterval(next, 3000);
  };
  
  const stop = () => {
    clearInterval(itv);
  };

  const handleWheel = (evt) => {
    evt.preventDefault();
    c += Math.sign(evt.deltaY); // get 1, -1
    c = mod(c, tot);
    anim();
  };

  // Events:
  elParent.addEventListener("pointerenter", stop);
  elParent.addEventListener("pointerleave", play);
  elParent.addEventListener("pointerdown", next);
  addEventListener("wheel", handleWheel);

  // Init:
  anim(); // animate to first image
  play(); // start autoplay!

};

els(".images-container").forEach(imagesWheeler);
    .images-container {
  position: relative;
  width: 10rem;
  aspect-ratio: 1;
  
  &>* {
    position: absolute;
    width: inherit;
    aspect-ratio: inherit;
    object-fit: cover;
    cursor: pointer;
    transition: opacity 0.4s;
    opacity: 0;
    pointer-events: none;
    
    &.is-active {
      opacity: 1;
      pointer-events: auto;
    }
  }
}
    Use click to advance, wheel to prev/next, mouseleave to autoplay!

<div class="images-container">
  <img class="image" src="//picsum.photos/seed/01/200/200" alt="">
  <img class="image" src="//picsum.photos/seed/02/200/200" alt="">
  <img class="image" src="//picsum.photos/seed/03/200/200" alt="">
  <img class="image" src="//picsum.photos/seed/04/200/200" alt="">
  <img class="image" src="//picsum.photos/seed/05/200/200" alt="">
  <img class="image" src="//picsum.photos/seed/06/200/200" alt="">
  <img class="image" src="//picsum.photos/seed/07/200/200" alt="">
  <img class="image" src="//picsum.photos/seed/08/200/200" alt="">
  <img class="image" src="//picsum.photos/seed/09/200/200" alt="">
  <img class="image" src="//picsum.photos/seed/10/200/200" alt="">
</div>

<p>Hey, you can have multiple!</p>

<div class="images-container">
  <img class="image" src="//picsum.photos/seed/21/200/200" alt="">
  <img class="image" src="//picsum.photos/seed/22/200/200" alt="">
  <img class="image" src="//picsum.photos/seed/23/200/200" alt="">
  <img class="image" src="//picsum.photos/seed/24/200/200" alt="">
  <img class="image" src="//picsum.photos/seed/25/200/200" alt="">
  <img class="image" src="//picsum.photos/seed/26/200/200" alt="">
  <img class="image" src="//picsum.photos/seed/27/200/200" alt="">
  <img class="image" src="//picsum.photos/seed/28/200/200" alt="">
  <img class="image" src="//picsum.photos/seed/29/200/200" alt="">
  <img class="image" src="//picsum.photos/seed/30/200/200" alt="">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search