短視訊軟體開發，實現簡單的輪播圖效果

一、程式碼示例

<!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;
}

以上就是短視訊軟體開發，實現簡單的輪播圖效果，更多內容歡迎關注之後的文章

短視訊軟體開發，實現簡單的輪播圖效果

相關文章