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

一、代码示例

<!DOCTYPE html><br><html><br><head><br>    <meta charset="UTF-8"><br>    <meta http-equiv="X-UA-Compatible" content="IE=edge"><br>    <meta name="viewport" content="width=device-width, initial-scale=1.0"><br>    <title>轮播图效果</title><br>    <link rel="stylesheet" href="css/index.css"><br></head><br><body><br>    <div><br>        <div><br>            <img src="image/1.png" alt=""><br>            <img src="image/2.png" alt=""><br>            <img src="image/3.png" alt=""><br>        </div><br>        <div><br>            <button>1</button><br>            <button>2</button><br>            <button>3</button><br>        </div><br>    </div><br>    <script><br>        let img_container = document.querySelector(".img_container");<br>        let btns = document.querySelectorAll("button");<br>        for(let i in btns){<br>            btns[i].onclick = function(){<br>                // 0 * 640<br>                // 1 * 640<br>                // 2 * 640<br>                img_container.style.transform = `translate(${-640 * i}px)`;<br>            }<br>        }<br>    </script><br></body><br></html>

二、样式

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

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