<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
/>
<title>
Change image dynamically
when user scrolls
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
img {
position: absolute;
left: 300px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<b>A Computer Science Portal
for
Geeks</b>
<div id=
"scroll-image"
>
<img src=
"CSS.png"
class=
"test"
/>
<img src=
"html.png"
class=
"test"
/>
<img src=
"php.png"
class=
"test"
/>
</div>
<script>
window.onload =
function
() {
var
imageIndex = 0;
var
images =
document.getElementsByClassName(
'test'
);
var
isMouseOverImage =
false
;
var
scrollImages =
document.getElementById(
'scroll-image'
);
var
x, y;
function
noScroll() {
window.scrollTo(x, y);
}
scrollImages.addEventListener(
"mouseenter"
,
function
() {
x = window.pageXOffset;
y = window.pageYOffset;
window.addEventListener(
"scroll"
, noScroll);
isMouseOverImage =
true
;
});
scrollImages.addEventListener(
"mouseleave"
,
function
() {
isMouseOverImage =
false
;
window.removeEventListener(
"scroll"
, noScroll);
});
scrollImages.addEventListener(
"wheel"
,
function
(e) {
if
(isMouseOverImage) {
var
nextImageIndex;
if
(e.deltaY > 0)
nextImageIndex = (imageIndex + 1)
% images.length;
else
nextImageIndex =
(imageIndex - 1
+ images.length)
% images.length;
images[imageIndex].style.zIndex =
"0"
;
images[nextImageIndex].style.zIndex =
"1"
;
imageIndex = nextImageIndex;
}
});
}
</script>
</body>
</html>