本篇文章给大家带来的内容是关于html中如何实现指示器左右两侧排列的轮播（完整代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>轮播</title>
<style>
/*us-banner*/
.py-aboutUs.aboutUs-ele.us-banner.usban-ulali{
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-ulali: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>aimg{
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:3px10px;
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:43pxauto;
font-size:18px;
}
.py-aboutUs.aboutUs-ele.usEle-learn{
width:1200px;
height:810px;
margin:120pxauto;
}
</style>
</head>
<body>
<pclass="us-banner"id="usBanner">
<ulclass="usban-ula">
<liclass="uslihover-li"value="0">调查系统</li>
<liclass="usli"value="1">考试系统</li>
<liclass="usli"value="2">面试题系统</li>
</ul>
<pclass="usban-ulb"id="usbanLb">
<ahref="javascript:;">
<imgsrc="public/img/9-year6.png"alt="调查系统1">
<pclass="usban-ula-p">从学习期间，每天老师会在系统内提出当天学习要点，学员必须选择是否已掌握，如果有学员选择没有掌握，系统自动提示该学员某部分知识没掌握，晚自习老师进行针对性辅导，直到完全学员彻底学会</p>
</a>
<ahref="javascript:;">
<imgsrc="public/img/9-year4.png"alt="考试系统2">
<pclass="usban-ula-p">从入学到毕业，采用分几段进阶模式教学，每完成一个阶段学习学员必须要通过考试，成绩合格才能进行下一阶段学习，同时将全部考试和阶段测试进行收集分析，生成个人学习成绩库，老师可以在第一时间发现学员可能在哪个阶段遇到学习困难和问题，并及时解决。</p>
</a>
<ahref="javascript:;">
<imgsrc="public/img/9-year1.jpg"alt="面试题系统3">
<pclass="usban-ula-p">面试真题库全部由动力节点学员收集整理，每月定时更新，每道题目动力节点老师都会进行详细解析，提供面试思路，帮助学员入职名企，拿高薪。</p>
</a>
<ahref="javascript:;">
<imgsrc="public/img/9-year2.jpg"alt="评价系统4">
<pclass="usban-ula-p">学员登陆系统根据自己学习感受对老师打分，包括教学质量，教学服务，以及个人意见等5项评价意见进行反馈，学生反馈的信息将直接和授课老师收入挂钩，从而严格约束老师，必须达到授课质量和服务标准要求。
</p>
</a>
<ahref="javascript:;">
<imgsrc="public/img/9-year5.png"alt="智能考勤系统5">
<pclass="usban-ula-p">动力节点智能考勤系统，采用了Ai人脸识别黑科技与后台数据交互传递，学员每天按时打卡后数据智能生成到考勤数据库，快速记录每天出勤情况，可以快速对学员学习进行有效的监督的考评。</p>
</a>
<ahref="javascript:;">
<imgsrc="public/img/9-year3.jpg"alt="学员圈子6">
<pclass="usban-ula-p">上万名的VIP学员学员交流圈，把优秀的人聚集在一起，扩展人脉，让知识共享，裂变，为己所用。加入动力节点大家庭学哥，学姐，学弟，学妹，都是你成功路上的宝贵资源</p>
</a>
</p>
<ulclass="usban-ula">
<liclass="usli"value="3">评价系统</li>
<liclass="usli"value="4">智能考勤</li>
<liclass="usli"value="5">学员圈子</li>
</ul>
</p>
<scriptsrc="public/js/jquery-3.1.1.min.js"></script>
<script>
//关于我们轮播
$(function(){
varusBoss=0;
varusLen=$("#usbanLb>a").length;
varusTime=setInterval(usRunimg,3000);
functionusRunimg(){
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>
本文转载自中文网
本文转载自中文网
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h54701.shtml
