div自动滑动，鼠标移上停止滑动

最新推荐文章于 2024-06-07 10:46:22 发布

他化天域外

最新推荐文章于 2024-06-07 10:46:22 发布

阅读量2.0k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_35606790/article/details/91978929

本文介绍如何使用CSS实现一个div元素自动滑动的效果，并在鼠标悬停时停止滑动。通过CSS的transition和:hover伪类，可以轻松创建这种交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是在做个人站的时候展示项目成果，因为不光需要展示，还需要介绍详细内容，就在滚动展示的地方做了这个效果以便于点开想要看的项目。

首先，要做的是一个需要滚动的区域。我前边写过一个关于图片循环滚动的示例，那个是一块块的的滚动==>实现图片的循环滚动.

这次我们就做滚动区域是平滑循环滚动效果。

下边是布局的HTML代码，原理是在要展示区域的div(.ban_img)里加一个能包含所有需要展示的图的大div(.in_img),


<div class=" ban_img">
        <div class="in_img">
            <div class="inside inside1"></div>
            <div class="inside inside2"></div>
            <div class="inside inside3"></div>
            <div class="inside inside4"></div>
            <div class="inside inside5"></div>
            <div class="inside inside6"></div>
            <div class="inside inside1"></div>
            <div class="inside inside2"></div>
            <div class="inside inside3"></div>
            <div class="inside inside4"></div>
                            
        </div></div>

下边是CSS样式，我加的是背景图，可跟实际情况选择（图片路径根据实际位置修改）


.ban_img{