使用css3实现简单的轮播图效果

最新推荐文章于 2022-08-04 21:40:24 发布

kaolagirl

最新推荐文章于 2022-08-04 21:40:24 发布

阅读量621

点赞数 1

分类专栏： html+css+js 文章标签： css3 css 前端

本文链接：https://blog.csdn.net/kaolagirl/article/details/123011245

版权

html+css+js 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

实现功能

点击按钮，进行图片轮播
在这里插入图片描述

代码示例

<!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>轮播图效果</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="swiper">
        <div class="img_container">
            <img src="image/1.png" alt="">
            <img src="image/2.png" alt="">
            <img src="image/3.png" alt="">
        </div>
        <div class="num_container">
            <button>1</button>
            <button>2</button>
            <button>3</button>
        </div>
    </div>

    <script>
        let img_container = document.querySelector(".img_container");
        let btns = document.querySelectorAll("button");
        for(let i in btns){
            btns[i].onclick = function(){
                // 0 * 640
                // 1 * 640
                // 2 * 640
                img_container.style.transform = `translate(${-640 * i}px)`;
            }
        }
    </script>
</body>
</html>

样式

*{
    margin:0px;
    padding: 0px;
}
.swiper{
    width: 640px;
    height: 320px;
    /* border:1px solid red; */
    overflow: hidden; /*超出部分隐藏*/
    position: relative;
}
.img_container{
    width: 1920px;
    height: 320px;
    display: flex;
    transition:transform 0.3s; /*设置过渡效果*/
}
/* .img_container:hover{
    transform: translate(-640px);
} */
.img_container img{
    width: 640px;
    height: 320px;
}
.num_container{
    position: absolute;
    bottom:0px;
}
.num_container button{
    width: 30px;
    height: 30px;
}

kaolagirl

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用css3实现简单的轮播图效果

实现功能点击按钮，进行图片轮播代码示例<!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"&g
复制链接

扫一扫