html中如何实现指示器左右两侧排列的轮播（完整代码）

!DOCTYPE html>
    html lang="en">
    head>
        meta charset="UTF-8">
        tITle>
    轮播/title>
        style>
/*us-banner*/.py-aboutUs .aboutUs-ele .us-banner .usban-ula li{
        width: 240px;
        height: 86px;
        line-height: 86px;
        background: #05dafb;
        border-radius: 5px;
        margin-bottom: 11px;
        text-align: center;
        font-Size: 17px;
}
.py-aboutUs .aboutUs-ele .us-banner .usban-ula .hover-li{
        background: white;
}
.py-aboutUs .aboutUs-ele .us-banner .usban-ula li:last-child{
        margin-bottom: 0;
}
.usban-ulb{
        width: 384px;
        height: 244px;
        overflow: hidden;
        position: relative;
        margin-top: 18px;
}
    .usban-ulb>
a{
        display: block;
        width: 384px;
        height: 244px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9;
}
    .usban-ulb>
a:First-child{
        z-index: 30;
}
    .usban-ulb>
a img{
        width: 100%;
        height: 100%;
}
    .usban-ulb>
a .usban-ula-p{
        width: 384px;
        line-height: 20px;
        background: rgba(0,0,0,0.7);
        font-size: 12px;
        text-align: left;
        color: white;
        box-sizing: border-box;
        padding: 3px 10px;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 10;
}
.py-aboutUs .aboutUs-ele .eleven-BTn{
        width: 267px;
        height: 65px;
        line-height: 65px;
        background-size: 100% 100%;
        margin: 43px auto;
        font-size: 18px;
}
.py-aboutUs .aboutUs-ele .usEle-learn{
        width: 1200px;
        height: 810px;
        margin: 120px auto;
}
        /style>
    /head>
    body>
    p class="us-banner" id="usBanner">
                    ul class="usban-ula">
                    li class="usli hover-li" value="0">
    调查系统/li>
                    li class="usli"  value="1">
    考试系统/li>
                    li class="usli"  value="2">
    面试题系统/li>
                /ul>
                p class="usban-ulb" id="usbanLb">
                    a href="javascript:;
    ">
                        img src="public/img/9-year6.png" alt="调查系统1">
                        p class="usban-ula-p">
    从学习期间，每天老师会在系统内提出当天学习要点，学员必须选择是否已掌握，如果有学员选择没有掌握，系统自动提示该学员某部分知识没掌握，晚自习老师进行针对性辅导，直到完全学员彻底学会/p>
                    /a>
                    a href="javascript:;
    ">
                        img src="public/img/9-year4.png" alt="考试系统2">
                        p class="usban-ula-p">
    从入学到毕业，采用分几段进阶模式教学，每完成一个阶段学习学员必须要通过考试，成绩合格才能进行下一阶段学习，同时将全部考试和阶段测试进行收集分析，生成个人学习成绩库，老师可以在第一时间发现学员可能在哪个阶段遇到学习困难和问题，并及时解决。/p>
                    /a>
                    a href="javascript:;
    ">
                        img src="public/img/9-year1.jpg" alt="面试题系统3">
                        p class="usban-ula-p">
    面试真题库全部由动力节点学员收集整理，每月定时更新，每道题目动力节点老师都会进行详细解析，提供面试思路，帮助学员入职名企，拿高薪。/p>
                    /a>
                    a href="javascript:;
    ">
                        img src="public/img/9-year2.jpg" alt="评价系统4">
                        p class="usban-ula-p">
    学员登陆系统根据自己学习感受对老师打分，包括教学质量，教学服务，以及个人意见等5项评价意见进行反馈，学生反馈的信息将直接和授课老师收入挂钩，从而严格约束老师，必须达到授课质量和服务标准要求。                /p>
                    /a>
                    a href="javascript:;
    ">
                        img src="public/img/9-year5.png" alt="智能考勤系统5">
                        p class="usban-ula-p">
    动力节点智能考勤系统，采用了 ai 人脸识别黑科技与后台数据交互传递，学员每天按时打卡后数据智能生成到考勤数据库，快速记录每天出勤情况，可以快速对学员学习进行有效的监督的考评。/p>
                    /a>
                    a href="javascript:;
    ">
                        img src="public/img/9-year3.jpg" alt="学员圈子6">
                        p class="usban-ula-p">
    上万名的 VIP 学员学员交流圈，把优秀的人聚集在一起，扩展人脉，让知识共享，裂变，为己所用。加入动力节点大家庭学哥，学姐，学弟，学妹，都是你成功路上的宝贵资源/p>
                    /a>
                /p>
                ul class="usban-ula">
                    li class="usli"  value="3">
    评价系统/li>
                    li class="usli"  value="4">
    智能考勤/li>
                    li class="usli"  value="5">
    学员圈子/li>
                /ul>
    /p>
    script src="public/js/jquery-3.1.1.min.js">
    /script>
    script>
//关于我们轮播$(function () {
        VAR usBoss = 0;
        var usLen = $("#usbanLb>
    a").length;
        var usTime = setInterval(usRunimg,3000);
    function usRunimg() {
            usBoss ++;
            if(usBoss >
 usLen-1){
                usBoss = 0;
        }
            $("#usbanLb>
    a").eq(usBoss).fadeIn(500).siblings().fadeOut(500);
            var $ulli = $(".usli").removeClass("hover-li");
            $ulli.eq(usBoss).addClass("hover-li");
    }
    // 鼠标移入事件    $("#usBanner").hover(function () {
            clearInterval(usTime);
    }
,function () {
            usTime = setInterval(usRunimg,3000);
    }
    );
    // 移入点点后显示相应图片    $(".usli").mouseenter(function () {
            usBoss = $(this).attr('value');
            // 换图片        $("#usbanLb>
    a").eq(usBoss).fadeIn(500).siblings().fadeOut(500);
            var $ulli = $(".usli").removeClass("hover-li");
            $ulli.eq(usBoss).addClass("hover-li");
    }
    );
}
    );
    /script>
    /body>
    /html>
    

相关推荐：

两个div，左右排列，左边做导航，右边显示_html/css_WEB-ITnose

CSS 两列布局 之 左侧适应，右侧固定 3种方式_html/css_WEB-ITnose

以上就是html中如何实现指示器左右两侧排列的轮播（完整代码）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！