html中图片的移动

最新推荐文章于 2025-06-11 06:24:12 发布

ASmallMouse

最新推荐文章于 2025-06-11 06:24:12 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_41972336/article/details/80183072

这是一个HTML页面示例，展示了如何使用CSS和JavaScript实现图片的左右滑动效果。通过按钮控制，图片能够在设定的容器内移动，实现简单的图片轮播功能。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>转圈圈</title>
    <style>
        div{
            height: 250px;
            width: 1200px;
            /* background: orange; */
            margin: 0 auto;
            position:relative;
        }
        .anniu1{
            height: 50px;
            width: 50px;
            float: left;
            /* background:black; */
            border-radius:40%;
            margin-top: 100px;
            margin-left:40px ;
            

        }
        .anniu2{
            height: 50px;
            width: 50px;
            float: right;
            /* background: black; */
            border-radius:40%;
            margin-top: 100px;
            margin-right:40px ;

        }
        #box1{
            height: 250px;
            width: 950px;
            /* background: rgb(65, 201, 52); */
            /* margin: 0 auto; */
            /* position:absolute; */
            /* margin: auto; */
            /* margin-top:25px; */
            margin-left: 35px;
            overflow: hidden;
            float: left;
            /* position: obsolute; */

        }
        ul{
            height: 220px;
            width: 905px;
            background: rgb(214, 144, 12);
            border: black solid;
            float: left;
            margin-top:5px; 
            left: 0;
            position: absolute;

        }
        li{
            float: left;
            margin-top: 15px;
            margin-left: 0px;
            
            

        }
    
    </style>
     <script src="js1.js" id="mylink">
     </script>
</head>

<body>



    <div>
        <button class="anniu1"><
        </button>
        <button class="anniu2">>
        </button>
        <div id="box1">
        <ul id="list">
            <li><img src="1.jpeg" alt=""></li>
            <li><img src="2.jpeg" alt=""></li>
            <li><img src="3.jpeg" alt=""></li>
            
        </ul>




        </div>




    </div>
</body>
</html>