影视网视频轮播特效案例

影视网视频轮播特效案例，适合作为前端学习的入门案例。

1.影视网视频轮播特效案例

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0 auto;
            padding: 0px;
        }

        body {
            background-color: #006699;
        }


        #particle-container {
            position: absolute;
            height: 100%;
            width: 100%;
        }

        #particle-container canvas {
            display: block;
            background: #006699;
        }


        h1 {
            margin: 20px auto;
            text-align: center;
            color: #fefefe;
            font-family: 黑体;
            font-weight: bolder;
            text-shadow: 2px 2px 2px lightgray;
        }

        #main {
            position: relative;
            width: 100%;
            height: 280px;
            margin: 20px auto;

        }


        .container {
            width: 800px;
            height: 235px;
            margin: 0px auto;

            /*background-color: lightblue;*/
            background-color: transparent;
            /*outline: 1px solid #fefefe*/;
            /*position: relative;*/
            /*这样写子容器无法垂直居中*/
            /*父元素必须有定位*/
            position: absolute;
            /* 水平垂直居中 */
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            display: flex;
            /*注意：overflow:hidden一定要加在.container容器*/
            overflow: hidden;
        }

        .lefter,
        .righter {
            width: 50%;
            height: 100%;
            position: relative;
            background-color: transparent;

        }

        .carousel {
            width: 100%;
            height: 100%;
            display: flex;
            /*轮播图过渡动画*/
            transition: 0.5s;
        }

        .carousel .item img {
            width: 400px;
            height: 235px;
        }

        #indicator {
            position: absolute;
            bottom: 10px;
            display: flex;
            /*outline: 1px solid #fff;*/
            left: 50%;
            transform: translateX(-50%);
        }

        #indicator span {
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;

        }

        #indicator span.active {
            background-color: #ffffff;
            border-color: #fff;
        }

        .footer {
            width: 80%;
            margin: 20px auto;
            text-align: center;
            color: #FCFCFC;
        }

        .footer a {
            color: #FCFCFC;
        }
    </style>
</head>
<body>
<h1>影视网视频轮播特效案例</h1>
<hr>
<div id="main">
    <div id="particle-container"></div>
    <div class="container">

        <div class="lefter">
            <div class="carousel">
                <div class="item">
                    <a><img src="http://media.simoniu.com/movie001.png"/></a>
                </div>
                <div class="item">
                    <a><img src="http://media.simoniu.com/movie002.png"/></a>
                </div>
                <div class="item">
                    <a><img src="http://media.simoniu.com/movie003.png"/></a>
                </div>
                <div class="item">
                    <a><img src="http://media.simoniu.com/movie004.png"/></a>
                </div>
            </div>
            <div id="indicator">
                <span class="active"></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="righter">

            <div style="width: 100%; height: 100%; position: absolute; background-color: #000;">
                <video id="player" src="http://media.simoniu.com/movie001.mp4" controls autoplay width="400px"
                       height="235px" type="video/mp4"></video>
            </div>
        </div>

    </div>

</div>

<div class="footer">
    <hr>
    <br>
    Copyright <span>&copy;</span> 2017-2023 牛牛编程
    All Rights Reserved.
    <a href="http://beian.miit.gov.cn/">京ICP备18024677号-1</a>&nbsp;&nbsp; <a href="#">作者：西蒙牛</a>
</div>

<script>
    let dom = {
        carousel: document.querySelector(".carousel"),
        indicators: document.querySelectorAll("#indicator span"),
        player: document.querySelector("#player")
    }

    function moveTo(index) {
        dom.carousel.style.transform = `translateX(-${index}00%)`;
        let active = document.querySelector("#indicator span.active");
        active.classList.remove('active');
        dom.indicators[index].classList.add('active');
        dom.player.setAttribute("src", `http://media.simoniu.com/movie00${index + 1}.mp4`);
    }

    dom.indicators.forEach((e, i) => {
        e.onclick = function () {
            moveTo(i);
        }
    });
</script>

<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/particles.js/2.0.0/particles.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>

js/index.js


//随机折现效果控制器
particlesJS("particle-container", {
    "particles": {
        "number": {
            "value": 80,
        },
        "color": {
            "value": "#ffffff"
        },
        "opacity": {
            "random": true,
        },
        "size": {
            "value": 3,
            "random": true,
        },
        "line_linked": {
            "enable": true,
            "distance": 150,
            "color": "#ffffff",
            "opacity": 0.4,
            "width": 1
        },
        "move": {
            "enable": true,
            "speed": 6,
            "direction": "none",
            "straight": false
        }
    }
});

运行效果：