JavaScript-Sandpit/slideshow_on_hover.html at main · johnstack/JavaScript-Sandpit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hover Slideshow Links</title>
<style>
  body {
    font-family: Arial, sans-serif;
    padding: 40px;
  }

  a.hover-link {
    display: block;
    margin: 20px 0;
    font-size: 20px;
    color: #0066cc;
    text-decoration: none;
    width: fit-content;
  }

  a.hover-link:hover {
    text-decoration: underline;
  }

  #slideshow {
    position: fixed;
    pointer-events: none;
    display: none;
    width: 200px;
    height: 200px;
    overflow: hidden;
    background: #000;
  }

  #slideshow img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>
</head>
<body>

<a href="#" class="hover-link" data-images="nature">Link One</a>
<a href="#" class="hover-link" data-images="city">Link Two</a>
<a href="#" class="hover-link" data-images="animals">Link Three</a>

<div id="slideshow">
  <img src="" alt="">
</div>

<script>
  const slideshow = document.getElementById("slideshow");
  const img = slideshow.querySelector("img");

  let interval = null;
  let index = 0;

  const imageSets = {
    nature: [
      "https://picsum.photos/400/300?random=1",
      "https://picsum.photos/400/300?random=2",
      "https://picsum.photos/400/300?random=3",
      "https://picsum.photos/400/300?random=4"
    ],
    city: [
      "https://picsum.photos/400/300?random=5",
      "https://picsum.photos/400/300?random=6",
      "https://picsum.photos/400/300?random=7",
      "https://picsum.photos/400/300?random=8"
    ],
    animals: [
      "https://picsum.photos/400/300?random=9",
      "https://picsum.photos/400/300?random=10",
      "https://picsum.photos/400/300?random=11",
      "https://picsum.photos/400/300?random=12"
    ]
  };

  document.querySelectorAll(".hover-link").forEach(link => {
    const images = imageSets[link.dataset.images];

    link.addEventListener("mouseenter", () => {
      index = 0;
      slideshow.style.display = "block";
      img.src = images[index];

      interval = setInterval(() => {
        index = (index + 1) % images.length;
        img.src = images[index];
      }, 120); // rapid slideshow speed
    });

    link.addEventListener("mousemove", e => {
      slideshow.style.left = e.clientX + 20 + "px";
      slideshow.style.top = e.clientY + 20 + "px";
    });

    link.addEventListener("mouseleave", () => {
      clearInterval(interval);
      slideshow.style.display = "none";
    });
  });
</script>

</body>
</html>