Як створити горизонтально ковзаюче зображення на веб-сайті?

8 Березня 2024 в 17:42 53

<div class="d1">
    <img src="square-image.jpeg">
</div>
<style>
.d1 {
    border: 3px solid red;
    width: 100%;
    height: 100vh;
    overflow: auto;
    margin: 0 auto;
    white-space: nowrap;
}
.d1 img {
    height: 100%;
    display: inline-block;
    vertical-align: top;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    let isDown = false;
    let startX;
    let scrollLeft;
    const slider = document.querySelector('.d1');
    slider.addEventListener('mousedown', (e) => {
        isDown = true;
        slider.classList.add('active');
        startX = e.pageX - slider.offsetLeft;
        scrollLeft = slider.scrollLeft;
    });
    slider.addEventListener('mouseleave', () => {
        isDown = false;
        slider.classList.remove('active');
    });
    slider.addEventListener('mouseup', () => {
        isDown = false;
        slider.classList.remove('active');
    });
    slider.addEventListener('mousemove', (e) => {
        if (!isDown) return;
        e.preventDefault();
        const x = e.pageX - slider.offsetLeft;
        const walk = (x - startX) * 2; // Adjust scrolling speed here
        slider.scrollLeft = scrollLeft - walk;
    });
});
</script>

</div>

<style>

.d1 {

border: 3px solid red;

width: 100%;

height: 100vh;

overflow: auto;

margin: 0 auto;

white-space: nowrap;

}

.d1 img {

height: 100%;

display: inline-block;

vertical-align: top;

}

</style>

document.addEventListener('DOMContentLoaded', function() {

let isDown = false;

let startX;

let scrollLeft;

const slider = document.querySelector('.d1');

slider.addEventListener('mousedown', (e) => {

isDown = true;

slider.classList.add('active');

startX = e.pageX - slider.offsetLeft;

scrollLeft = slider.scrollLeft;

});

slider.addEventListener('mouseleave', () => {

isDown = false;

slider.classList.remove('active');

});

slider.addEventListener('mouseup', () => {

isDown = false;

slider.classList.remove('active');

});

slider.addEventListener('mousemove', (e) => {

if (!isDown) return;

e.preventDefault();

const x = e.pageX - slider.offsetLeft;

const walk = (x - startX) * 2; // Adjust scrolling speed here

slider.scrollLeft = scrollLeft - walk;

});

</script>

Як можна створити горизонтально ковзаюче зображення на веб-сайті? [закрито]. Це питання потребує детального відлагодження. Воно наразі не приймає відповіді. Відредагуйте питання, щоб додати бажану поведінку, конкретну проблему або помилку та найкоротший код, необхідний для відтворення проблеми. Це допоможе іншим відповісти на питання. Закрито 9 днів тому.

Отже, я вже кілька днів намагаюся це реалізувати, але я близько не став. Я створюю веб-сайт, і вгорі я намагаюся отримати квадратне зображення, зокрема карту, яка була б такою ж шириною, і висотою, як висота видимої області. Зрозуміло, що зображення центрується. Це проста частина, але я маю проблеми з тим, щоб зробити його так, щоб ви могли перетягувати / ковзати зображення вправо або вліво, щоб побачити решту карти.

Прикріплений GIF повинен допомогти пояснити, зелений квадрат – це зображення, прямокутник – екран / видима область, а сірий коло – це торкання та рухання по екрану, що переміщає зображення. Анімований приклад Я спробував кілька способів створення каруселі зображень, але нічого не працювало так, як мені хотілося. Я намагаюся зробити його ковзання горизонтально плавно без прилягання до встановленого положення.

Ось код, який я спробував, він працює ідеально, окрім того, коли ви намагаєтеся перемістити його в центр, нижче наведений приклад використання transform: translate, але я також пробував position: relative з left: -50%. У обох випадках ви не можете прокручувати вліво, а коли ви прокручуєте вправо, зображення не зупиняється на краю і залишає неприємний білий проміжок.