相关代码：HTML

 <!-- 导航区 -->
    <header class="site-head" id="site-head">
        <div class="contact">
            <p class="center-wrap">服务热线:400-8888-888</p>
        </div>
        <nav class="main-nav">
            <div class="center-wrap clearfix">
                <h1>慕家居</h1>
                <ul>
                    <li>
                        <a href="">
                            <img src="images/mjjdh1.png" alt="">
                            <div class="picbox"><img src="images/cphcx1.png" alt=""></div>
                            <div class="wordbox">网站首页</div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/mjjdh2.png" alt="">
                            <div class="picbox"><img src="images/cphcx2.png" alt=""></div>
                            <div class="wordbox">关于我们</div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/mjjdh3.png" alt="">
                            <div class="picbox"><img src="images/cphcx3.png" alt=""></div>
                            <div class="wordbox">服务建设</div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/mjjdh4.png" alt="">
                            <div class="picbox"><img src="images/cphcx4.png" alt=""></div>
                            <div class="wordbox">产品中心</div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/mjjdh5.png" alt="">
                            <div class="picbox"><img src="images/cphcx5.png" alt=""></div>
                            <div class="wordbox">服务大厅</div>
                        </a>
                    </li>
                </ul>
                <div class="soso-box clearfix">
                    <input type="text" placeholder="请输入搜索内容">
                    <a href="" class="btn iconfont">&#xe62d;</a>
                </div>
            </div>
        </nav>
        <div class="bgrimg">
            <img src="images/banner01.png" alt="">
            <img src="images/banner02-banner02.png" alt="">
            <img src="images/banner03-banner03.png" alt="">
            <ol id="button_btn">
                <li class="btn_color" date-n="0"></li>
                <li date-n="1"></li>
                <li date-n="2"></li>
            </ol>
        </div>
    </header>
    <script src="js/carousel .js"></script>

相关代码：CSS

/* 联系热线 */
.site-head .contact{
    background-color: #0058AA;
    height: 40px;
}

.site-head .contact p{
    text-align: right;
    font-size: 18px;
    color: #FFFFFF;
    line-height: 40px;
}

/* 导航搜索条 */
.site-head .main-nav .center-wrap{
    width: 1201px;
}

.site-head .main-nav {
    height: 122px;
}

.site-head .main-nav h1{
    float: left;
    font-size: 64px;
    color: #0058AA;
    padding: 19px 0 11px;
}

.site-head .main-nav ul{
    float: left;
    width: 561px;
    height: 91px;
    padding: 19px 62px 0 109.1px;
}

.site-head .main-nav ul li{
    float: left;
    margin-right: 60px;
    position: relative;
}

.site-head .main-nav ul li:last-child{
    margin-right: 0;
}

.site-head .main-nav ul li .wordbox{
    padding-top: 20px;
    text-align: center;
    font-weight: bold;
    color: #545454;
}

.site-head .main-nav ul li .picbox{
    width: 50px;
    height: 50px;
    margin-left: 6px;
    background-color: #0058AA;
    border-radius: 50%;
    opacity: 0;
}

.site-head .main-nav ul li:hover .picbox{
    opacity: 1;
    animation: bt 0.4s ease 0s infinite alternate;
}

@keyframes bt{
    from{
        transform: scale(1);
    }
    to{
        transform: scale(1.1);
    }
}

.site-head .main-nav ul li img{
    position: absolute;
    top: 9px;
    left: 50%;
    margin-left: -16.5px;
}

.site-head .main-nav .soso-box{
    float: right;
    margin-top: 51px;
    border: 1px solid #D3D3D3;
    width: 274px;
    height: 39px;
    border-radius: 5px;
}

.site-head .main-nav .soso-box input{
    width: 212px;
    height: 37px;
    padding-left: 15px;
    outline: none;
    border-style: none;
    float: left;
}

.site-head .main-nav .soso-box a{
    display: block;
    width: 47px;
    height: 39px;
    background-color: #0058AA;
    font-family: 'iconfont';
    float: right;
    font-size: 38px;
    text-align: center;
    color: white;
    border-radius: 0 5px 5px 0;
}

.site-head .bgrimg{
    width: 100%;
    height: 650px;
    position: relative;
}

.site-head .bgrimg img{
    width: 100%;
    position: absolute; 
    opacity: 0;
}
.site-head .bgrimg img:first-child{
    opacity: 1;
}

.site-head .bgrimg ol{
    width: 120px;
    height: 20px;
    position: absolute;
    bottom: 25px;
    left: 50%;
    margin-left: -70px;
}

.site-head .bgrimg ol li{
    float: left;
    width: 20px;
    height: 20px;
    margin-right: 20px;
    background-color: rgb(77, 77, 255);
    border-radius: 10px;
    transition: width 0.5s ease 0s;
}

.site-head .bgrimg ol li:last-child{
    margin-right: 0;
}

.site-head .bgrimg ol li.btn_color{
    width: 40px;
    
}

相关代码：JS

/*
*呼吸轮播图
*/ 
(function(){
    var img = document.querySelectorAll('.site-head .bgrimg img');
    var button_btn = document.getElementById('button_btn');
    var lis = document.querySelectorAll('.site-head .bgrimg ol li');
    var site_head = document.getElementById('site-head');

    var idx=0;
    function timer2(){
        img[idx].style.opacity = 0;
        idx++;
        if (idx > 2) {
            idx = 0;
        }
        img[idx].style.opacity = 1;
        // 让圆点跟随
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = '';
        }
        lis[idx].className = 'btn_color';
    }

    var timer3=setInterval(timer2, 2000);

    // 点击事件
    button_btn.onclick = function (e) {
        if (e.target.tagName.toLowerCase() == 'li') {
            var n = Number(e.target.getAttribute('date-n'));
            idx = n;
                // 以圆点为主，监听圆点单击
                for (var i = 0; i < img.length; i++) {
                    // if (i != idx){
                        lis[i].className = '';
                        img[i].style.opacity = 0;
                    // }
                }
            lis[idx].className = 'btn_color';
            img[idx].style.opacity = 1;
        }
    }
    
    site_head.onmouseenter=function(){
        clearInterval(timer3);
    }
    site_head.onmouseleave = function () {
        // 设表先关
        clearInterval(timer2);
        timer3 = setInterval(timer2, 2000);
    }
})();