为了账号安全,请及时绑定邮箱和手机立即绑定

我在做到5.2步骤的时候按按钮没有反应,视频里面 有反应 main.className += ' main-i_active';感觉这里有问题,求救

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style-type: none;
            text-decoration: none;
            border: 0;
        }

        body {
            background-color: #fff;
            color: #555;
            font-family: 'Avenir Next';
            font-size: 14px;
            -webkit-font-smoothing: antialiased; /*字体平滑*/
        }

        .slider .main .main-i, .slider .main, .slider {
            width: 100%;
            height: 400px;
            position: relative;
        }
            /*幻灯片区域*/
            .slider .main {
                overflow: hidden;
            }
                /*每一个幻灯片样式*/
                .slider .main .main-i {
                }

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

                    .slider .main .main-i .caption {
                        position: absolute;
                        right: 50%;
                        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: 40px;
                            font-size: 70px;
                            line-height: 70px;
                            color: #000000;
                            text-align: right;
                        }
            /*控制按钮区域*/
            .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;
                    z-index: 1;
                    margin-left: 1px;
                }

                    .slider .ctrl .ctrl-i img {
                        width: 100%;
                        position: absolute;
                        left: 0;
                        bottom: 50px;
                        z-index: 1;
                        opacity: 0;
                        -webkit-transition: all .2s; /*渐变特效*/
                    }
                    /*hover 到控制按钮的样式*/
                    .slider .ctrl .ctrl-i:hover {
                        background-color: #F0F0F0;
                    }

                        .slider .ctrl .ctrl-i:hover img {
                            bottom: 13px;
                            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 {
                opacity: 0;
                position: absolute;
                top: 0;
                right: 50%;
                -webkit-transition: all .5s;
            }

                .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 {
                    -webkit-transition: all .8s 1s;
                }

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

                .slider .main .main-i_active h2,
                .slider .main .main-i_active h3 {
                    margin-right: 0;
                }
    </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="img/{{index}}.jpg" />
            </div>
        </div>
        <div class="ctrl" id="template_ctrl">
            <a class="ctrl-i" id="ctrl_{{index}}" href="javascript:switchSlider({{index}};);">
                <img src="img/{{index}}.jpg" /></a>
        </div>
    </div>
</body>
<script type="text/javascript">

    // 1.数据定义(实际生产环境中,应用后台数据)
    var data = [
        { img: 1, h2: 'h1', h3: 'h2' },
        { img: 2, h2: 'h1', h3: 'h2' },
        { img: 3, h2: 'h1', h3: 'h2' },
        { img: 4, h2: 'h1', h3: 'h2' },
        { img: 5, h2: 'h1', h3: 'h2' },
        { img: 6, h2: 'h1', h3: 'h2' },
        { img: 7, h2: 'h1', h3: 'h2' }
    ];
    //2.通用函数
    var g = function (id) {
        if (id.substr(0, 1) == '.') { return document.getElementsByClassName(id.substr(1)); }
        return document.getElementById(id);
    }

    //添加幻灯片的操作(所有幻灯片和按钮)
    function addSliders() {
        //3.1 获取模板
        var tpl_main = g('template_main').innerHTML
            .replace(/^\s*/, '')//去掉头部空白符
            .replace(/\s*$/, '');//去掉尾部空白符
        var tpl_ctrl = g('template_ctrl').innerHTML
            .replace(/^\s*/, '')//去掉头部空白符
            .replace(/\s*$/, '');//去掉尾部空白符

        //3.2 定义最终输出 HTML 变量
        var out_main = [];
        var out_ctrl = [];

        //3.3 遍历所有数据,构建最终输出的 HTML
        for (i in data) {
            var _html_main = tpl_main
                .replace(/{{index}}/g, data[i].img)
                .replace(/{{h2}}/g, data[i].h2)
                .replace(/{{h3}}/g, data[i].h3);//运用数组,调用内容

            var _html_ctrl = tpl_ctrl
                .replace(/{{index}}/g, data[i].img);
            out_main.push(_html_main);
            out_ctrl.push(_html_ctrl);
        }
        //3.4 把html 回写到对应的DOM 里面
        g('template_main').innerHTML = out_main.join('');
        g('template_ctrl').innerHTML = out_ctrl.join('');
    }

    // 5. 幻灯片切换
    function switchSlider(n) {
        // 5.1 获得要展现的幻灯片和控制按钮 DOM
        var main = g('main_' + n);
        var ctrl = g('ctrl_' + n);

        // 5.2 获得所有的幻灯片以及控制按钮
        var clear_main = g('.main-i');
        var clear_ctrl = g('.ctrl-i');

        main.className += ' main-i_active';
        ctrl.className += ' ctrl-i_active';
    }
    // 4. 定义合适处理幻灯片输出
    //window执行完毕
    window.onload = function () {
        addSliders();
    }
</script>
</html>


正在回答

1 回答

这个+=就是在原来类名的基础上再添加一个main-i_active的类名,

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

我在做到5.2步骤的时候按按钮没有反应,视频里面 有反应 main.className += ' main-i_active';感觉这里有问题,求救

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信