js实现无缝自动轮播

最新推荐文章于 2025-09-16 10:30:00 发布

原创

最新推荐文章于 2025-09-16 10:30:00 发布 · 554 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript

这个博客展示了如何使用HTML、CSS和JavaScript实现一个图片无缝自动轮播的效果。通过设置CSS样式和JavaScript动画，当鼠标离开容器时，图片会按照设定的时间间隔自动切换，形成平滑的轮播体验。同时，当鼠标悬停在容器上时，轮播会暂停，增加了交互性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
   
   
            margin: 0;
            padding: 0;
        }

        .box {
   
   
            width: 601px;
            height: 314px;
            margin: 150px 30%;
            padding: 5px;
            border: 1px solid blue;
        }

        .inner {
   
   
            width: 601px;
            height: 314px;
            overflow: hidden;
            position: relative;
        }

        .inner ul {
   
   
            list-style: none;
            width: 1000%;
            /*使得ul更宽，后面li能浮动到一行上*/
            position: absolute;
            top: 0;
            left: 0;
        }

        img {
   
   
            vertical-align: top;