huahuibao/app/teach/views/main/about.php

<!--关于我们开始-->
<div class="aboutus-box">
    <div class="title">学校简介</div>
    <div class="msg">
        <div class="txt">厦门市国兰花尚文化传播有限公司，于2010年由名师游俊涛老师、姜祖岚老师凭借18年的花艺资质，10年的教学经验，创办的花艺培训学校，每年都有几百名来自全国各地的学员出师，花店开遍福建省及全国各地，多位学员已成为行业中的佼佼者。</div>
        <div class="txt">本培训中心致力于花艺人才的培养与交流，由国内知名花艺师游俊涛老师、姜祖岚老师和严秋妹老师主持授课，多年的花艺教学经验，课程内容将花艺设计与个性构思理念及花店的经营管理相结合，注重实际操作能力的培养，传授与众不同的花艺精品包装及领先潮流的设计方法，可为您提供完善的高品质的个性化培训方案，主课老师游俊涛先生尽管年纪轻轻，却已是国内享有盛誉的花艺设计师，并在国内重大花艺比赛中频频获奖，多年来，他不仅远赴全国各地交流探讨花艺，与国内、外花艺设计师相互切磋，更把花艺技巧运用到商业范畴，使艺术与商业技巧融汇在一起，使产品增添艺术色彩，让观赏者多方面了解欣赏花艺作品，从而也使更多的人认识并热爱插花这门艺术。</div>
        <div>
            <img width="710" src="<?= Yii::$app->params['imgUrl'] ?>/common/rectangle_grey.jpg" data-original="/images/glhs/aboutus.jpg" class="lazy" />
        </div>
    </div>
    <div class="title">学校荣誉</div>
    <div id="honor" class="mui-slider  aboutus-slider">
        <div class="mui-slider-group mui-slider-loop aboutus-slider-group">

            <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
            <?php $honorLast = end($honor);
            $honorLastKey = key($honor);
            reset($honor); ?>
            <div class="mui-slider-item mui-slider-item-duplicate">
                <div class="aboutus-slider-item" name="honor_item<?= $honorLastKey ?>">
                    <div class="img-box" style="background-image:url(<?= Yii::$app->params['imgUrl'] ?>/common/rectangle_grey.jpg)"></div>
                    <div class="img-box" style="background-image:url(<?= Yii::$app->params['imgUrl'] ?>/common/rectangle_grey.jpg)"></div>
                </div>
            </div>

            <?php foreach ($honor as $key => $info) { ?>
                <div class="mui-slider-item">
                    <div class="aboutus-slider-item" name="honor_item<?= $key ?>">
                        <div class="img-box" style="background-image:url(<?= Yii::$app->params['imgUrl'] ?>/common/rectangle_grey.jpg)"></div>
                        <div class="img-box" style="background-image:url(<?= Yii::$app->params['imgUrl'] ?>/common/rectangle_grey.jpg)"></div>
                    </div>
                </div>
            <?php } ?>
            <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
            <?php reset($honor);
            $honorFirst = current($honor);
            $honorFirstKey = key($honor); ?>
            <div class="mui-slider-item mui-slider-item-duplicate">
                <div class="aboutus-slider-item" name="honor_item<?= $honorFirstKey ?>">
                    <div class="img-box" style="background-image:url(<?= Yii::$app->params['imgUrl'] ?>/common/rectangle_grey.jpg)"></div>
                    <div class="img-box" style="background-image:url(<?= Yii::$app->params['imgUrl'] ?>/common/rectangle_grey.jpg)"></div>
                </div>
            </div>

        </div>
        <div class="mui-slider-indicator">
            <div id="honorPre" class="btn pre"><img src="/images/glhs/icon-pre.png"></div>
            <div id="honorNext" class="btn next"><img src="/images/glhs/icon-next.png"></div>
        </div>
    </div>
    <div class="title">联系我们</div>
    <div class="msg1">
        <div class="leftArea">
            <div class="s-title">咨询热线：</div>
            <div class="list">
                <div class="icon-box"><img class="img_10" src="/images/glhs/icon-tel.png"/></div>
                0592-5804-937
            </div>
            <div class="list">
                <div class="icon-box"><img class="img_10" src="/images/glhs/icon-tel1.png"/></div>
                13600903070 （姜老师）
            </div>
            <div class="list">
                <div class="icon-box"><img class="img_12" src="/images/glhs/icon-weixin.png"/></div>
                glhshypx
            </div>
            <div class="list">
                <div class="icon-box"><img class="img_10" src="/images/glhs/icon-qq.png"/></div>
                1209120450
            </div>
        </div>
        <div class="rightArea">
            <img src="/images/glhs/code.jpg" />
            <div>国兰花尚花艺培训学校二维码长按扫描</div>
        </div>

    </div>
    <div class="msg2">
        <div class="s-title">地址：</div>
        <div class="txt">
            福建省厦门市思明区后埭溪路128号-5（厦门火车站附近），您可以乘坐公交车到“金榜公园站”，BRT或地铁至“文灶站”下车
        </div>
    </div>
    <div class="msg2">
        <div class="s-title">上课时间：</div>
        <div class="txt">
            上课时间：周二、周三、周四、周五、周六、周日；
        </div>
        <div class="txt">
            09：30-11：30 \ 14：30-17：00。
        </div>
    </div>

</div>
<!--关于我们结束-->
<script>
    var contentList = new Array();
    mui.init();
    <?php if(count($honor) >= 2){ ?>
    var honorObj = mui('#honor');
    var honorCurrentIndex = 0;
    var honorContent = '';
    var nextImgIndex = 0;
    var preImgIndex = 0;
    document.querySelector('#honor').addEventListener('slide', function (event) {
        honorCurrentIndex = event.detail.slideNumber;
        <?php foreach($honor as $key => $info){ ?>
        if (honorCurrentIndex == <?= $key ?>) {
            <?php if(isset($honor[$key + 1])){ $nextInfo = $honor[$key + 1]; ?>
            honorContent = '<div class="img-box" style="background-image:url(<?= Yii::$app->params['imgUrl'].$nextInfo[0]['mobileUrl'] ?>)"></div><div class="img-box" style="background-image:url(<?= Yii::$app->params['imgUrl'].$nextInfo[1]['mobileUrl'] ?>)"></div>';
            nextImgIndex = honorCurrentIndex + 1;
            addElement('honor', nextImgIndex, honorContent);
            <?php }?>
            <?php  if(isset($honor[$key - 1])){ $preInfo = $honor[$key - 1];  ?>
            honorContent = '<div class="img-box" style="background-image:url(<?= Yii::$app->params['imgUrl'].$preInfo[0]['mobileUrl'] ?>)"></div><div class="img-box" style="background-image:url(<?= Yii::$app->params['imgUrl'].$preInfo[1]['mobileUrl'] ?>)"></div>';
            preImgIndex = honorCurrentIndex - 1;
            addElement('honor', preImgIndex, honorContent);
            <?php } ?>
        }
        <?php }  ?>
    });
    document.querySelector('#honorPre').addEventListener('click', function (event) {
        honorObj.slider().gotoItem(honorCurrentIndex - 1)
    });
    document.querySelector('#honorNext').addEventListener('click', function (event) {
        honorObj.slider().gotoItem(honorCurrentIndex + 1)
    });
    $(window).scroll(function(){
        //第一、第二、最后张图片加载出来
        if (($(document).scrollTop() + 500) >= $(document).height() - $(window).height()) {

            <?php reset($honor);$thisHonor=$honor[0];?>
            honorContent = '<div class="img-box" style="background-image:url(<?= Yii::$app->params['imgUrl'].$thisHonor[0]['mobileUrl'] ?>)"></div><div class="img-box" style="background-image:url(<?= Yii::$app->params['imgUrl'].$thisHonor[1]['mobileUrl'] ?>)"></div>';
            addElement('honor', 0, honorContent);
            <?php reset($honor);$thisHonor=$honor[1];?>
            honorContent = '<div class="img-box" style="background-image:url(<?= Yii::$app->params['imgUrl'].$thisHonor[0]['mobileUrl'] ?>)"></div><div class="img-box" style="background-image:url(<?= Yii::$app->params['imgUrl'].$thisHonor[1]['mobileUrl'] ?>)"></div>';
            addElement('honor', 1, honorContent);
            <?php reset($honor);$thisHonor = end($honor);$thisKey = key($honor);?>
            honorContent = '<div class="img-box" style="background-image:url(<?= Yii::$app->params['imgUrl'].$thisHonor[0]['mobileUrl'] ?>)"></div><div class="img-box" style="background-image:url(<?= Yii::$app->params['imgUrl'].$thisHonor[1]['mobileUrl'] ?>)"></div>';
            addElement('honor', <?= $thisKey ?>, honorContent);

        }
    });
    <?php } ?>

    //对象名称 第几张图片 具体html
    function addElement() {
        var objectName = arguments[0];
        var no = arguments[1];
        var content = arguments[2];
        var key = objectName + "_" + no;
        if (contentList.hasOwnProperty(key)) {
            return true;
        }
        //以下表示看第二张图片时加载第三张图片
        $("div[name=" + objectName + "_item" + no + "]").html(content);
        contentList[key] = content;
        console.log(key);
    }
</script>