css+ js轮播效果

最新推荐文章于 2024-07-16 08:00:00 发布

是可爱的大福呀~

最新推荐文章于 2024-07-16 08:00:00 发布

阅读量232

点赞数 1

文章标签：前端 html javascript Powered by 金山文档

本文链接：https://blog.csdn.net/henghahouhei/article/details/129364811

版权

这段代码展示了如何使用CSS和JavaScript创建一个包含图片和视频的轮播效果。通过调整元素的位置、透明度和z-index属性，实现了内容的动态切换。同时，添加了底部导航按钮，支持用户点击切换和自动播放功能。

摘要由CSDN通过智能技术生成

css+ js 图片/视频轮播效果

<!DOCTYPE HTML>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../modules/video/video-js.min.css">
    <style>
        .teachers_b {
            position: relative;
            margin-top: 16vh;
        }

        #slide {
            margin: 0 auto;
            width: 760px;
            height: 330px;
            position: relative;
        }

        #slide li {
            position: absolute;
            width: 760px;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            align-items: flex-start;
            -webkit-box-align: flex-start;
            -webkit-align-items: flex-start;
            overflow: hidden;
            /*box-shadow: 0 0 20px #1d374d;*/
            box-sizing: border-box;
            border: 0.56vh solid #01cdff;
            background: #34acff;
            color: #000000;
            font-size: 30px;
        }
        #slide li .videoBox{
            width: 100%;
            height: 100%;
        }

        #slide li img {
            width: 100%;
            height: 100%;
        }

        .slide_left {
            /* width:240px;*/
        }

        .slide_right {
            /* width:440px;*/
            padding: 40px;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            min-width: 0;
        }

        .slide_right h3 {
            font: 400 30px/18px "Microsoft Yahei";
            color: #222222;
        }

        .slide_right h3 span {
            display: inline-block;
            margin-left: 10px;
            font: 400 14px/36px "Microsoft Yahei";
            color: #555555;
        }

        .slide_right p {
            padding: 20px 0 30px;
            color: #555555;
            font: 400 14px/24px "Microsoft Yahei";
            border-bottom: 1px solid #dbdbdb;
        }

        .slide_right dl {
            padding-top: 30px;
        }

        .slide_right dd {
            float: left;
            width: 33.3%;
            color: #777;
            font: 400 12px/24px "Microsoft Yahei";

        }

        .slide_right dd h3 {
            color: #ff9000;
            margin-bottom: 20px;
        }

        .bottom {
            position: absolute;
            display: flex;
            top: 60vh;
        }

        .bottom .bottomNum {
            background: #0086ff;
            opacity: 0.5;
            width: 20px;
            height: 20px;
            margin-right: 20px;
            color: #ffffff;
            text-align: center;
        }
        .bottomActive{
            background: #0086ff;
            opacity: 1;
        }
    </style>
</head>

<body>
<div class="container clearfix teachers_b">
    <div class="slide" id="slide">
        <ul>
            <li data-id="1">
                1
            </li>
            <li data-id="2">
                2
            </li>
            <li data-id="3">
                3
            </li>
            <li data-id="4">
                4
            </li>
        </ul>
        <div class="bottom">
            <div class="bottomNum bottomActive" data-id="1">1</div>
            <div class="bottomNum" data-id="2">2</div>
            <div class="bottomNum" data-id="3">3</div>
            <div class="bottomNum" data-id="4">4</div>

        </div>
    </div>
</div>
<script src="../js/jquery.min.js"></script>
<script>
    $(function () {
        /*图片位置数据*/
        var datas = [
            {
                id: 1,
                'z-index': 6,
                opacity: 1,
                botOpacity:1,
                width: '40.36vw',
                height: '41.02vh',
                top: '0vh',
                left: 0,
                name: 'name1'
            },
            {
                id: 2,
                'z-index': 3,
                opacity: 0.5,
                botOpacity:0.5,
                width: '31.98vw',
                height: '31.2vh',
                top: '0vh',
                left: '24vw',
                name: 'name2'
            },
            {
                id: 3,
                'z-index': 2,
                opacity: 0.2,
                botOpacity:0.5,
                width: '31.98vw',
                height: '33.33vh',
                top: '0vh',
                left: 110,
                name: 'name3'
            },
            {
                id: 4,
                'z-index': 3,
                opacity: 0.5,
                botOpacity:0.5,
                width: '31.98vw',
                height: '31.2vh',
                top: '0vh',
                left: '-13vw',
                name: 'name4'
            },
        ]
        move();

        function move() {
            /*图片分布*/
            $("#topSubTitle").html(datas[0].name);
            for (var i = 0; i < datas.length; i++) {
                var data = datas[i];
                $('#slide ul li').eq(i).css('z-index', data['z-index']);
                $('#slide ul li').eq(i).stop().animate(data, 1200);
                $('.bottomNum').eq(i).css('opacity',data['botOpacity'])
            }
        }

        $('.bottom .bottomNum').on('click', function () {
            var _id = parseInt($(this).data('id'))
            let _now = parseInt($("#slide ul li[id=1]").data('id'))
            if (_now !== _id) {
                let _num = _now - _id
                if (_num > 0) {
                    for (let i = 0; i < _num; i++) {
                        let _change = datas.shift();
                        datas.push(_change);
                    }
                } else {
                    for (let i = _num; i < 0; i++) {
                        let _change = datas.pop();
                        datas.unshift(_change);
                    }
                }
                move();
            }
        })

        /*左箭头事件处理函数*/
        function lastYewu() {
            var last = datas.pop();
            datas.unshift(last);

            move();
        }

        /*右箭头事件处理函数*/
        function nextYewu() {
            var last = datas.pop();
            datas.unshift(last);
            /*var first = datas.shift();
            datas.push(first);*/
            move();
        }

        /*自动播放*/
        var timer = setInterval(function () {
            nextYewu();
        }, 5000);
        /*鼠标进入slide显示箭头,清除自动播放*/
        $('#slide').on({
            mouseenter: function () {
                clearInterval(timer);
            }, mouseleave: function () {
                /*鼠标离开时自动播放*/
                clearInterval(timer);
                timer = setInterval(function () {
                    nextYewu();
                }, 5000)
            }
        })
    })
</script>
</body>