当前位置：首页 > 前端开发 > 正文

html 如何实现图片滚动

HTML中，可以通过CSS设置图片容器的 overflow: scroll;或`overflow: auto;

HTML中实现图片滚动有多种方法,以下是几种常见且实用的方式：

使用CSS动画实现图片滚动

（一）水平滚动

  1. 原理
    • 利用CSS的animation属性和关键帧（keyframes）来定义图片的滚动效果，通过改变图片的transform属性中的translateX值，让图片在水平方向上移动,形成滚动的视觉效果。
  2. 示例代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片水平滚动</title>
    <style>
        .scroll-container {
            width: 600px; / 容器宽度 /
            white-space: nowrap; / 防止子元素换行 /
            overflow: hidden; / 隐藏超出容器的部分 /
            border: 1px solid #ccc;
        }
        .scroll-item {
            display: inline-block; / 让图片在一行内排列 /
            width: 100px; / 图片宽度 /
            height: 100px; / 图片高度 /
            margin-right: 10px; / 图片之间的间距 /
            animation: scroll 10s linear infinite; / 应用滚动动画 /
        }
        @keyframes scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
        }
    </style>
</head>
<body>
    <div class="scroll-container">
        <img src="image1.jpg" alt="图片1" class="scroll-item">
        <img src="image2.jpg" alt="图片2" class="scroll-item">
        <img src="image3.jpg" alt="图片3" class="scroll-item">
        <!-可以添加更多图片 -->
    </div>
</body>
</html>
    • 在这个例子中，.scroll-container是图片滚动的容器，设置了固定宽度、禁止换行和隐藏溢出内容。.scroll-item是每个图片的样式，通过animation属性应用了名为scroll的关键帧动画，关键帧从translateX(0)开始，到translateX(-100%)结束，表示图片从初始位置向左移动自身宽度的100%，形成循环滚动效果，动画持续时间为10秒，线性运动,无限循环。

（二）垂直滚动

  1. 原理
    • 与水平滚动类似，只是将translateX改为translateY,让图片在垂直方向上移动。
  2. 示例代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片垂直滚动</title>
    <style>
        .scroll-container {
            height: 300px; / 容器高度 /
            overflow: hidden; / 隐藏超出容器的部分 /
            border: 1px solid #ccc;
            position: relative;
        }
        .scroll-item {
            position: absolute; / 绝对定位，使图片可以叠加 /
            width: 100px; / 图片宽度 /
            height: 100px; / 图片高度 /
            top: 0; / 初始位置 /
            animation: scroll 10s linear infinite; / 应用滚动动画 /
        }
        @keyframes scroll {
            0% { top: 0; }
            100% { top: 100%; }
        }
    </style>
</head>
<body>
    <div class="scroll-container">
        <img src="image1.jpg" alt="图片1" class="scroll-item">
        <img src="image2.jpg" alt="图片2" class="scroll-item">
        <img src="image3.jpg" alt="图片3" class="scroll-item">
        <!-可以添加更多图片 -->
    </div>
</body>
</html>
    • 这里.scroll-container设置了固定高度，.scroll-item使用绝对定位，通过top属性在垂直方向上定位，关键帧动画从top: 0到top: 100%，使图片从容器顶部移动到底部,实现垂直滚动。

使用JavaScript实现图片滚动

（一）基于定时器的滚动

  1. 原理

    • 利用JavaScript的setInterval函数，每隔一定时间间隔改变图片的位置，模拟滚动效果，可以通过操作图片的style属性来调整其在页面中的位置。

  2. 示例代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于定时器的图片滚动</title>
    <style>
        .scroll-container {
            width: 600px; / 容器宽度 /
            white-space: nowrap; / 防止子元素换行 /
            overflow: hidden; / 隐藏超出容器的部分 /
            border: 1px solid #ccc;
            position: relative;
        }
        .scroll-item {
            display: inline-block; / 让图片在一行内排列 /
            width: 100px; / 图片宽度 /
            height: 100px; / 图片高度 /
            margin-right: 10px; / 图片之间的间距 /
            position: relative;
        }
    </style>
</head>
<body>
    <div class="scroll-container">
        <img src="image1.jpg" alt="图片1" class="scroll-item">
        <img src="image2.jpg" alt="图片2" class="scroll-item">
        <img src="image3.jpg" alt="图片3" class="scroll-item">
        <!-可以添加更多图片 -->
    </div>
    <script>
        const container = document.querySelector('.scroll-container');
        const items = document.querySelectorAll('.scroll-item');
        let index = 0;
        function scrollImages() {
            index++;
            if (index >= items.length) {
                index = 0;
            }
            container.style.transform = `translateX(${-index  110}px)`; // 110是图片宽度加间距
        }
        setInterval(scrollImages, 1000); // 每1秒滚动一次
    </script>
</body>
</html>
    • 首先获取容器和所有图片元素的引用，然后定义一个index变量来记录当前显示的图片索引。scrollImages函数每次调用时，index自增，当index超过图片数量时，重置为0，通过设置容器的transform属性的translateX值，将容器整体向左移动，实现图片滚动，这里-index 110中的110是图片宽度（100px）加上间距（10px），最后使用setInterval函数每隔1秒调用一次scrollImages函数。

（二）基于事件监听的滚动（鼠标悬停暂停滚动）

  1. 原理

    在基于定时器的滚动基础上，添加鼠标悬停事件监听，当鼠标悬停在容器上时，清除定时器，暂停滚动；当鼠标离开时,重新启动定时器。

  2. 示例代码

    html 如何实现图片滚动 第1张

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于事件监听的图片滚动</title>
    <style>
        .scroll-container {
            width: 600px; / 容器宽度 /
            white-space: nowrap; / 防止子元素换行 /
            overflow: hidden; / 隐藏超出容器的部分 /
            border: 1px solid #ccc;
            position: relative;
        }
        .scroll-item {
            display: inline-block; / 让图片在一行内排列 /
            width: 100px; / 图片宽度 /
            height: 100px; / 图片高度 /
            margin-right: 10px; / 图片之间的间距 /
            position: relative;
        }
    </style>
</head>
<body>
    <div class="scroll-container">
        <img src="image1.jpg" alt="图片1" class="scroll-item">
        <img src="image2.jpg" alt="图片2" class="scroll-item">
        <img src="image3.jpg" alt="图片3" class="scroll-item">
        <!-可以添加更多图片 -->
    </div>
    <script>
        const container = document.querySelector('.scroll-container');
        const items = document.querySelectorAll('.scroll-item');
        let index = 0;
        let intervalId;
        function startScrolling() {
            clearInterval(intervalId);
            intervalId = setInterval(scrollImages, 1000); // 每1秒滚动一次
        }
        function stopScrolling() {
            clearInterval(intervalId);
        }
        function scrollImages() {
            index++;
            if (index >= items.length) {
                index = 0;
            }
            container.style.transform = `translateX(${-index  110}px)`; // 110是图片宽度加间距
        }
        container.addEventListener('mouseenter', stopScrolling);
        container.addEventListener('mouseleave', startScrolling);
        startScrolling(); // 启动滚动
    </script>
</body>
</html>
    • 在这个例子中，定义了startScrolling和stopScrolling函数来分别启动和停止滚动，在容器上添加了mouseenter和mouseleave事件监听，当鼠标进入容器时，调用stopScrolling函数清除定时器，暂停滚动；当鼠标离开容器时，调用startScrolling函数重新启动定时器,继续滚动。

使用第三方库实现图片滚动（如Swiper）

  1. 原理

    Swiper是一个流行的JavaScript库，专门用于创建轮播图、幻灯片和各种滚动效果，它提供了丰富的配置选项和强大的功能，如触摸滑动、分页器、导航按钮等,可以轻松实现图片滚动效果。

  2. 示例代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用Swiper实现图片滚动</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
    <style>
        .swiper-container {
            width: 600px; / 容器宽度 /
            height: 300px; / 容器高度 /
        }
        .swiper-slide {
            background: #fff; / 背景颜色 /
            display: flex; / 使用flex布局使图片居中 /
            justify-content: center; / 水平居中 /
            align-items: center; / 垂直居中 /
        }
        .swiper-slide img {
            width: 100%; / 图片宽度占满滑块 /
            height: auto; / 自动调整高度 /
        }
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="image1.jpg" alt="图片1"></div>
            <div class="swiper-slide"><img src="image2.jpg" alt="图片2"></div>
            <div class="swiper-slide"><img src="image3.jpg" alt="图片3"></div>
            <!-可以添加更多滑块 -->
        </div>
        <!-如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
    <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            loop: true, // 循环模式
            autoplay: {
                delay: 3000, // 自动播放时间间隔，3秒
                disableOnInteraction: false, // 用户操作后是否停止自动播放，false表示不停止
            },
            pagination: {
                el: '.swiper-pagination', // 分页器元素选择器
                clickable: true, // 分页器是否可点击跳转
            },
            navigation: {
                nextEl: '.swiper-button-next', // 下一个按钮元素选择器
                prevEl: '.swiper-button-prev', // 上一个按钮元素选择器
            },
        });
    </script>
</body>
</html>
    • 首先引入Swiper的CSS和JS文件，在HTML结构中，.swiper-container是Swiper的容器，.swiper-wrapper包含所有的滑块（每个滑块对应一张图片），.swiper-slide是单个滑块的样式，如果需要分页器和导航按钮，可以在容器中添加相应的元素，在JavaScript中，创建一个新的Swiper实例，配置了循环模式、自动播放、分页器和导航按钮等选项。loop: true表示开启循环模式，图片会循环滚动；autoplay配置了自动播放的时间间隔和用户操作后是否停止自动播放；pagination和navigation分别配置了分页器和导航按钮的相关属性。

FAQs

问题1：如何控制图片滚动的速度？

  • 解答：如果是使用CSS动画实现滚动，可以通过调整关键帧动画的持续时间来控制速度，在之前的水平滚动示例中，animation: scroll 10s linear infinite;中的10s就是动画持续时间，将其改为更小的值（如5s）会使滚动速度加快，改为更大的值（如20s）会使滚动速度减慢，如果是使用JavaScript实现滚动，以基于定时器的滚动为例，可以通过修改setInterval函数的时间间隔来控制速度，如setInterval(scrollImages, 1000);中的1000表示每1秒滚动一次，将其改为更小的值（如500）会使滚动速度加快，改为更大的值（如2000）会使滚动速度减慢，对于使用第三方库（如Swiper）实现的滚动，可以通过配置选项中的autoplay的delay属性来控制自动播放的速度，如在Swiper示例中，autoplay: { delay: 3000, ... }中的3000表示每3秒切换一次图片,修改这个值即可调整滚动速度。

问题2：如何让图片滚动到特定的位置？

  • 解答：如果是使用CSS动画实现滚动，可以通过修改关键帧动画的目标值来实现，在水平滚动示例中，如果想让图片滚动到中间位置而不是完全滚出视线，可以修改关键帧中的translateX值，假设容器宽度为600px，图片总宽度为330px（3张图片，每张100px宽，加上间距），想让图片滚动到中间位置，可以将关键帧中的100% { transform: translateX(-165px); }（因为600 330 = 270，270的一半是135，考虑到间距等因素取165左右），如果是使用JavaScript实现滚动，以基于定时器的滚动为例，可以通过计算要滚动到的位置对应的索引，然后设置容器的transform属性的translateX或translateY值来实现，在水平滚动示例中，如果想滚动到第二张图片的位置，可以将index设置为1（假设从0开始计数），然后计算container.style.transform =translateX(${-1 110}px)`（110是图片宽度加间距），对于使用第三方库（如Swiper）实现的滚动，可以使用Swiper提供的方法来控制滚动位置，Swiper的slideTo方法可以跳转到指定的滑块，如swiper.slideTo(1);

ML图片滚动
0

相关文章