많은 웹사이트에서 멀티 이미지 무한 스크롤 효과를 볼 수 있습니다. 이번에는 순수 JavaScript를 사용하여 여러 이미지를 무한으로 스크롤하는 방법과 마우스 오버 시 멈춤 기능을 구현해 보겠습니다.
1. 효과 미리보기:
2. 코드 구현:
<!DOCTYPE html>
<html>
<head>
<title>무한 스크롤</title>
<style>
* { margin: 0; padding: 0; }
.carousel-container { position: relative; border: 1px solid #0ff; width: 1100px; height: 180px; margin: 50px auto 0; overflow: hidden; }
.carousel-list { position: absolute; left: 0; }
.carousel-item { list-style: none; width: 200px; float: left; padding: 10px; height: 160px; }
.carousel-item img { width: 100%; }
</style>
<script>
window.onload = function() {
const container = document.getElementById('carousel');
const list = container.querySelector('.carousel-list');
const items = list.querySelectorAll('.carousel-item');
let speed = 10;
let intervalId;
list.innerHTML += list.innerHTML;
list.style.width = `${items.length * items[0].offsetWidth}px`;
function scroll() {
if (list.offsetLeft < -list.offsetWidth / 2) {
list.style.left = '0px';
} else if (list.offsetLeft > 0) {
list.style.left = `-${list.offsetWidth / 2}px`;
}
list.style.left = `${list.offsetLeft + speed}px`;
}
intervalId = setInterval(scroll, 30);
container.addEventListener('mouseover', () => clearInterval(intervalId));
container.addEventListener('mouseout', () => intervalId = setInterval(scroll, 30));
document.querySelector('.left-arrow').addEventListener('click', () => speed = -10);
document.querySelector('.right-arrow').addEventListener('click', () => speed = 10);
};
</script>
</head>
<body>
<a href="#" class="left-arrow">←</a>
<a href="#" class="right-arrow">→</a>
<div id="carousel" class="carousel-container">
<ul class="carousel-list">
<li class="carousel-item"><img src="images/1.jpg"></li>
<li class="carousel-item"><img src="images/2.jpg"></li>
<li class="carousel-item"><img src="images/3.jpg"></li>
<li class="carousel-item"><img src="images/4.jpg"></li>
<li class="carousel-item"><img src="images/5.jpg"></li>
</ul>
</div>
</body>
</html>
3. 간단한 무한 스크롤:
4. 코드 구현:
<!DOCTYPE html>
<html>
<head>
<title>간단한 무한 스크롤</title>
<style>
* { margin: 0; padding: 0; }
.simple-carousel { position: relative; width: 1500px; height: 344px; margin: 0 auto; overflow: hidden; }
.simple-list { position: absolute; top: 0; left: 0; }
.simple-item { float: left; list-style: none; width: 700px; height: 344px; }
</style>
<script>
window.onload = function() {
const container = document.getElementById('simpleCarousel');
const list = container.querySelector('.simple-list');
const items = list.querySelectorAll('.simple-item');
let speed = -5;
let intervalId;
list.style.width = `${items[0].offsetWidth * items.length}px`;
intervalId = setInterval(() => {
list.style.left = `${list.offsetLeft + speed}px`;
if (list.offsetLeft < -list.offsetWidth / 2) {
list.style.left = '0px';
}
}, 30);
container.addEventListener('mouseover', () => clearInterval(intervalId));
container.addEventListener('mouseout', () => intervalId = setInterval(() => {
list.style.left = `${list.offsetLeft + speed}px`;
if (list.offsetLeft < -list.offsetWidth / 2) {
list.style.left = '0px';
}
}, 30));
};
</script>
</head>
<body>
<div id="simpleCarousel" class="simple-carousel">
<ul class="simple-list">
<li class="simple-item"><img src="images/1.jpg"></li>
<li class="simple-item"><img src="images/2.jpg"></li>
<li class="simple-item"><img src="images/3.jpg"></li>
<li class="simple-item"><img src="images/4.jpg"></li>
</ul>
</div>
</body>
</html>
5. 상하 스크롤:
6. 코드 구현:
<!DOCTYPE html>
<html>
<head>
<title>상하 스크롤</title>
<style>
* { margin: 0; padding: 0; }
.vertical-carousel { text-align: center; }
.vertical-wrap { width: 500px; height: 700px; margin: 0 auto; overflow: hidden; position: relative; }
.vertical-wrap img { width: 100%; }
.vertical-item { list-style: none; width: 700px; height: 344px; padding: 10px 0; }
.vertical-list { position: absolute; top: 0; left: 0; }
</style>
<script>
window.onload = function() {
const container = document.getElementById('verticalCarousel');
const list = container.querySelector('.vertical-list');
const items = list.querySelectorAll('.vertical-item');
let speed = 0;
let intervalId;
list.innerHTML += list.innerHTML;
document.getElementById('upButton').addEventListener('mousedown', () => {
speed = -5;
intervalId = setInterval(move, 30);
});
document.getElementById('upButton').addEventListener('mouseup', () => clearInterval(intervalId));
document.getElementById('downButton').addEventListener('mousedown', () => {
speed = 5;
intervalId = setInterval(move, 30);
});
document.getElementById('downButton').addEventListener('mouseup', () => clearInterval(intervalId));
function move() {
list.style.top = `${list.offsetTop + speed}px`;
if (list.offsetTop < -list.offsetHeight / 2) {
list.style.top = '0px';
} else if (list.offsetTop > 0) {
list.style.top = `-${list.offsetHeight / 2}px`;
}
}
};
</script>
</head>
<body>
<div id="verticalCarousel" class="vertical-carousel">
<div id="upButton"><img src="images/prevup.png"></div>
<div class="vertical-wrap">
<ul class="vertical-list">
<li class="vertical-item"><img src="images/1.jpg"></li>
<li class="vertical-item"><img src="images/2.jpg"></li>
<li class="vertical-item"><img src="images/3.jpg"></li>
<li class="vertical-item"><img src="images/4.jpg"></li>
</ul>
</div>
<div id="downButton"><img src="images/nextdown.png"></div>
</div>
</body>
</html>