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

互联网 18-9-7
本篇文章给大家带来的内容是关于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>
html中如何实现指示器左右两侧排列的轮播（完整代码）

相关资讯

标签推荐
