您的位置 首页 html教程

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

本篇文章给大家带来的内容是关于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中如何实现指示器左右两侧排列的轮播(完整代码)的详细内容,更多请关注php中文网其它相关文章!

文章来源:火云技术网

文章标题:html中如何实现指示器左右两侧排列的轮播(完整代码)

文章地址:https://www.pyhw.net/34840_html%e4%b8%ad%e5%a6%82%e4%bd%95%e5%ae%9e%e7%8e%b0%e6%8c%87%e7%a4%ba%e5%99%a8%e5%b7%a6%e5%8f%b3%e4%b8%a4%e4%be%a7%e6%8e%92%e5%88%97%e7%9a%84%e8%bd%ae%e6%92%ad%ef%bc%88%e5%ae%8c%e6%95%b4%e4%bb%a3.html

关于作者: 火云技术网

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图