html中如何完成指示器左右2侧排列的轮播(完整代码)
发表时间:2023-09-01 来源:明辉站整理相关软件相关文章人气:
[摘要]本篇文章给大家带来的内容是关于html中如何实现指示器左右两侧排列的轮播(完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。<!DOCTYPE html>
<html lang="en">
<head><meta...
本篇文章给大家带来的内容是关于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中文网其它相关文章!
网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。