轮播图样式案例
<!DOCTYPE html>
<html lang="ch-zn">
<head>
<meta charset="UTF-8">
<title>moban</title>
<style>
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
#banner{
820px;
height: 380px;
margin: 100px auto;
overflow: hidden;
}
#banner ul.tp{
1000%;
height: 340px;
transition: all .5s;
}
#banner ul.tp li{
float: left;
820px;
height: 340px;
}
#banner ul.tp a{
display: block;
100%;
height: 100%;
}
#banner ul.tp a li img{
display: block;
820px;
height: 340px;
}
#banner ul.title{
display: flex;
100%;
height: 40px;
}
#banner ul.title li{
flex-direction:row-reverse;
100%;
height: 38px;
background-color: rgb(227,226,226);
border-bottom: 2px solid rgb(227,226,226);
font-size: 12px;
line-height:38px;
text-align: center;
/* 无法被选中 */
user-select: none;
/* 鼠标变手指状态 */
cursor: pointer;
}
#banner ul.title li.activ{
background-color: rgb(247,246,246);
border-bottom: 2px solid #cea861;
color: #cea861;
}
</style>
</head>
<body>
<div id="banner">
<ul class="tp">
<li><a href=""><img src="./img/6.jpg" alt=""></a></li>
<li><a href=""><img src="./img/7.jpg" alt=""></a></li>
<li><a href=""><img src="./img/8.jpg" alt=""></a></li>
<li><a href=""><img src="./img/9.png" alt=""></a></li>
<li><a href=""><img src="./img/10.jpg" alt=""></a></li>
</ul>
<ul class="title">
<li class="activ">2021 臻心之礼</li>
<li>至臻终章2020</li>
<li>2021新赛季 新征程</li>
<li>管盟有礼</li>
<li>转区服务限时半价</li>
</ul>
</div>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
/* 轮播图*/
(function () {
//获取tp标签权限
let atp = document.querySelector("#banner ul.tp"),
//获取title下li的标签权限
atitle = document.querySelectorAll("#banner ul.title li"),
//获title的length
lentp = atitle.length,
//定义初始状态
index = 0
for (let i = 0; i < lentp; i++) {
//title的移入事件函数
atitle[i].onmouseenter = function (){
//tp图片跟随i的变化,不断marginleft改变
atp.style.marginLeft = i*-820 + "px";
//title初始状态清楚
atitle[index].classList.remove("activ");
//初始状态跟随i变化
index = i;
//强制通过for循环清楚li的名字
/* for (let j = 0; j < lentp; j++) {
atitle[j].classList.remove("activ")
}; */
//重新给title下选中的li添加名字
this.classList.add("activ")
}
};
})();
</script>
</body>
<!--
笔记区域
-->
</html>
