JS+CSS3 实现带预览的幻灯片效果 PS 也可以说没有自动轮播的轮播图-CSDN博客

本文链接：https://blog.csdn.net/Sandy_zhi/article/details/110186416
业精于勤荒于嬉
工作任务完成了，那么练练CSS吧！
上预览图，就是鼠标放到控制按钮可以看小的预览图，点击控制按钮进行幻灯片的切换，完整代码地址在最后。
再开始开发之前，先引入一下需求分析，采用的VCD 分析法，V:View,C:Controller ,D:data ,具体的分析上图吧，
视图分析：
数据分析：
行为分析
那么根据以上的图标分析上代码吧
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preview sliderShow</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            padding: 50px 0;
            background-color: #fff;
            font-size: 14px;
            font-family: 'Avenir';
            color: #555;
            -webkit-font-smoothing: antialiased
                /* 字体抗锯齿 */
        }

        .slider .main .main-i,
        .slider .main,
        .slider {
            width: 100%;
            height: 500px;
            position: relative;
        }

        /* 幻灯片区域 */
        .slider .main {
            overflow: hidden;
        }

        .slider .main .main-i {}

        .slider .main .main-i img {
            width: 100%;
            position: absolute;
            left: 0;
            top: 50%;
            z-index: 1;
        }

        .slider .main .main-i .caption {
            position: absolute;
            right: 63%;
            top: 30%;
            z-index: 9;
        }

        .slider .main .main-i .caption h2 {
            font-size: 40px;
            line-height: 50px;
            color: #b5b5b5;
            text-align: right;
        }

        .slider .main .main-i .caption h3 {
            font-size: 70px;
            line-height: 70px;
            color: #000000;
            text-align: right;
            font-family: 'Open Sans Condense';
        }

        /* 控制按钮区域 */
        .slider .ctrl {
            width: 100%;
            height: 13px;
            line-height: 13px;
            text-align: center;
            position: absolute;
            left: 0;
            bottom: -13px;
            /* background-color: #f00; */
            transition: all .2s;
        }

        .slider .ctrl .ctrl-i {
            display: inline-block;
            width: 150px;
            height: 13px;
            background-color: #666;
            box-shadow: 0 1px 1px rgb(0, 0, 0, .3);
            position: relative;
            -webkit-box-sizing: border-box;
            margin-left: 1px;


        }

        .slider .ctrl .ctrl-i img {
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 50px;
            z-index: 9;
            opacity: 0;

        }

        /* :hover 控制按钮的样式  */
        /* hover 需要处理两部分 一个是按钮 一个是图片 */
        .slider .ctrl .ctrl-i:hover {
            background-color: #f0f0f0;
        }

        .slider .ctrl .ctrl-i:hover img {
            bottom: 13px;
            -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255, 255, 255, .3)));
            opacity: 1;
        }

        /* :active 当前展现的状态 */
        .slider .ctrl .ctrl-i_active:hover,
        .slider .ctrl .ctrl-i_active {
            background-color: #000;
        }

        .slider .ctrl .ctrl-i_active:hover img {
            opacity: 0;
        }

        /* 幻灯片切换样式 */
        .slider .main .main-i {
            position: absolute;
            right: 50%;
            top: 0;
            opacity: 0;
            -webkit-transition: all .5s;
            z-index: 2;
        }

        .slider .main .main-i_right {
            right: -50%;
        }

        .slider .main .main-i h2 {
            margin-right: 45px;
        }

        .slider .main .main-i h3 {
            margin-right: -45px;
        }

        .slider .main .main-i h2,
        .slider .main .main-i h3 {
            opacity: 0;
            -webkit-transition: all 1s .8s;
        }

        #main_background,
        .slider .main .main-i_active {
            right: 0;
            opacity: 1;
        }

        #main_background {
            z-index: 1;
        }

        .slider .main .main-i_active h2,
        .slider .main .main-i_active h3 {
            margin-right: 0px;
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="slider">
        <!-- 0. 修改 VIEW ->Template(关键字替换) 增加template id -->
        <div class="main" id="template_main">
            <div class="main-i" id="main_{{index}}">
                <div class="caption">
                    <h2>{{h2}}</h2>
                    <h3>{{h3}}</h3>
                </div>
                <img src="imgs/{{index}}.jpg" alt="" class="picture">
            </div>
        </div>
        <div class="ctrl" id="template_ctrl">
            <a class="ctrl-i " id="ctrl_{{index}}" href="javascript:sitchSlider({{index}});">
                <img src="imgs/{{index}}.jpg" alt="">
            </a>
        </div>
    </div>
    <script>
        //1、模拟数据定义）
        let data = [{
                img: 1,
                h2: 'Creative',
                h3: 'DUET'
            },
            {
                img: 2,
                h2: 'Friendly',
                h3: 'DEVIL'
            },
            {
                img: 3,
                h2: 'Tranquilent',
                h3: 'COMPATRIOT'
            },
            {
                img: 4,
                h2: 'Insecure',
                h3: 'HUSSLER'
            },
            {
                img: 5,
                h2: 'Loving',
                h3: 'REBEL'
            },
            {
                img: 6,
                h2: 'Passionate',
                h3: 'SEEKER'
            },
            {
                img: 7,
                h2: 'Crazy',
                h3: 'FRIEND'
            }

        ]
        // 2、定义通用函数
        let g = function (id) {
            if (id.substr(0, 1) == '.') {
                return document.getElementsByClassName(id.substr(1))
            }
            return document.getElementById(id)
        }
        //3、添加幻灯片的操作(所有幻灯片&对应按钮)
        function addSliders() {
            //3.1、获取模板
            let tpl_main = g('template_main').innerHTML
                .replace(/^\s*/, '')
                .replace(/\s*$/, '')

            let tpl_ctrl = g('template_ctrl').innerHTML
                .replace(/^\s*/, '')
                .replace(/\s*$/, '')

            //3.2、定义最终输出的HTML 变量
            let out_mian = []
            let out_ctrl = []

            //3.3、遍历所有数据 构建最终的输出HTML
            for (i in data) {
                let _html_main = tpl_main
                    .replace(/{{index}}/g, data[i].img)
                    .replace(/{{h2}}/g, data[i].h2)
                    .replace(/{{h3}}/g, data[i].h3)
                    .replace(/{{css}}/g, ['', 'main-i_right'][i % 2]);

                let _html_ctrl = tpl_ctrl
                    .replace(/{{index}}/g, data[i].img)

                out_mian.push(_html_main)
                out_ctrl.push(_html_ctrl)
            }
            //3.4、把HTML 回写到对应的DOM 里面
            g('template_main').innerHTML = out_mian.join('')
            g('template_ctrl').innerHTML = out_ctrl.join('')

            //7、增加#main_background
            g('template_main').innerHTML += tpl_main
                .replace(/{{index}}/g, '{{index}}')
            g('main_{{index}}').id = 'main_background'

        }

        //5、幻灯片切换
        function sitchSlider(n) {
            //5.1、获得要展现的幻灯片及控制按钮DOM
            let main = g('main_' + n)
            let ctrl = g('ctrl_' + n)
            //5.2、现将所有的active都去掉 为当前项设置active
            let clear_main = g('.main-i')
            let clear_ctrl = g('.ctrl-i')
            for (let i = 0; i < clear_ctrl.length; i++) {
                clear_main[i].className = clear_main[i].className.replace(' main-i_active', '')
                clear_ctrl[i].className = clear_ctrl[i].className.replace(' ctrl-i_active', '')
            }
            main.className += ' main-i_active'
            ctrl.className += ' ctrl-i_active'

            //7.2、切换时 复制上一张幻灯片到 main_background 中
            setTimeout(() => {
                g('main_background').innerHTML = main.innerHTML
            }, 500)
        }

        //6、 动态调整图片的 margin-top 以使其垂直居中
        function movePictures() {
            let pictures = g('.picture')
            for (let i = 0; i < pictures.length; i++) {
                pictures[i].style.marginTop = (-1 * pictures[i].clientHeight / 2) + 'px'
            }
        }

        //4、定义何时处理幻灯片的输出
        window.onload = function () {
            addSliders()
            sitchSlider(1)
            // vue中就是this.nextTick
            setTimeout(() => {
                movePictures()
            }, 100);
        }
    </script>
</body>

</html>
代码已经是完整的了，整个的项目是慕课的一个小练习：https://www.imooc.com/learn/412
欢迎交流，太喜欢这几张图的感觉了。