短视频软件开发，实现简单的轮播图效果

短视频软件开发，实现简单的轮播图效果

一、代码示例

 

<!DOCTYPE html>
<html>
<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>
        <div>
            <img src="image/1.png" alt="">
            <img src="image/2.png" alt="">
            <img src="image/3.png" alt="">
        </div>
        <div>
            <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;
}

 

以上就是短视频软件开发，实现简单的轮播图效果， 更多内容欢迎关注之后的文章

 

posted @ 2022-05-19 14:17  云豹科技-苏凌霄  阅读(90)  评论(0)    收藏  举报