有没有做成功的同学

个回答

x偏爱_南半球o

2020-08-04 17:54:15
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带缩略图幻灯片</title>
    
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            padding: 50px 0;
            background-color: #fff;
            font-size: 14px;
            font-family: 'Avenir Next';
            color: #555;
            -webkit-font-smoothing: antialiasd;
        }

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

        .slider .main {
            overflow: hidden;
        }

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

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

        .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: #000;
            text-align: right;
            font-family: 'Open Sans Condensed';
        }

        .slider .ctrl {
            width: 100%;
            height: 13px;
            line-height: 13px;
            text-align: center;
            position: absolute;
            left: 0;
            bottom: -13px;
        }

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

        .slider .ctrl .ctrl-i img {
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 50px;
            z-index: 1;
            opacity: 0;
            transition: all .2s;
        }

        .slider .ctrl .ctrl-i:hover {
            background-color: #f0f0f0;
        }

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

        .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 {
            opacity: 0;
            position: absolute;
            right: 50%;
            top: 0;
            transition: all .5s;
            z-index: 2;
        }

        .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 {
            transition: all 1s .5s;
            opacity: 0;
        }

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

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

        #main_background {
            z-index: 1;
        }

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

</head>

<body>
    <div class="slider">
        <div class="main" id="template_main">
            <div class="main-i {{css}}" id="main_{{index}}">
                <div class="caption">
                    <h2>{{h2}}</h2>
                    <h3>{{h3}}</h3>
                </div>
                <img src="img/{{index}}.jpg" class="picture">
            </div>
        </div>
        <div class="ctrl" id="template_ctrl">
            <a href="javascript:switchSlider({{index}});" class="ctrl-i" id="ctrl_{{index}}"><img
                    src="img/{{index}}.jpg"></a>
        </div>
    </div>

    
    <script>
        var data = [
            { img: 1, h1: 'Creative', h2: 'DUET' },
            { img: 2, h1: 'Friendly', h2: 'DEVIL' },
            { img: 3, h1: 'Insecure', h2: 'HUSSLER' },
            { img: 4, h1: 'Loving', h2: 'REBEL' },
            { img: 5, h1: 'Passionate', h2: 'SEEKER' },
            { img: 6, h1: 'Tranquilent', h2: 'COMPATRIOT' },
            { img: 7, h1: 'Crazy', h2: 'FRIEND' }
        ]

        var g = function (id) {
            if (id.substr(0, 1) == '.') {
                return document.getElementsByClassName(id.substr(1));
            }
            return document.getElementById(id);
        }

        function addSliders() {
            var tpl_main = g('template_main').innerHTML.replace(/^\s*/, '').replace(/\s*/, '');
            var tpl_ctrl = g('template_ctrl').innerHTML.replace(/^\s*/, '').replace(/\s*/, '');

            var out_main = [];
            var out_ctrl = [];

            for (i in data) {
                var _html_main = tpl_main.replace(/{{index}}/g, data[i].img).replace(/{{h2}}/g, data[i].h1).replace(/{{h3}}/g, data[i].h2).replace(/{{css}}/g, ['', 'main-i_right'][i % 2]);
                var _html_ctrl = tpl_ctrl.replace(/{{index}}/g, data[i].img);

                out_main.push(_html_main);
                out_ctrl.push(_html_ctrl);
            }
            g('template_main').innerHTML = out_main.join(' ');
            g('template_ctrl').innerHTML = out_ctrl.join(' ');

            g('template_main').innerHTML += tpl_main.replace(/{{index}}/g, '{{index}}').replace(/{{h2}}/g, data[i].h1).replace(/{{h3}}/g, data[i].h2);
            g('main_{{index}}').id = 'main_background';
        }

        function switchSlider(n) {
            var main = g('main_' + n);
            var ctrl = g('ctrl_' + n);

            var clear_main = g('.main-i');
            var clear_ctrl = g('.ctrl-i')

            for (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';

            setTimeout(function () { g('main_background').innerHTML = main.innerHTML; }, 1000);

        }

        function movePictures() {
            var pictures = g('.picture');
            for (i = 0; i < pictures.length; i++) {
                pictures[i].style.marginTop = (-1 * pictures[i].clientHeight / 2) + 'px';
            }
        }

        window.onload = function () {
            addSliders();
            switchSlider(2);
            setTimeout(function () {
                movePictures()
            }, 100);
        }
    </script>
</body>

</html>

0