lol
/* 清除网页的默认间距 */
*{
margin: 0;
padding: 0;
}
/* 通过class找到对应的标签 .+class名称 */
.banner{
width: 820px;
height: 380px;
background-color: blue;
}
.banner_img{
width: 820px;
height: 340px;
background-color: red;
/* 超出隐藏属性 */
overflow: hidden;
}
.banner_img ul{
width: 4100px;
/* 过渡动画 */
transition: all 0.2s;
}
.banner_img li{
width: 820px;
height: 340px;
float: left;
/* 清除li前面的列表符号 */
list-style: none;
}
.banner_nav{
width: 820px;
height: 40px;
background-color: green;
}
/* 后代选择器，先找容器，再找内部标签 */
.banner_nav li{
width: 164px;
height: 40px;
/* 由于li在网页中属于块元素，独立成行 */
/* 浮动属性，让原本上下排列的li，并排 */
float: left;
/* 清除li前面的列表符号 */
list-style: none;
/* 字号是14px */
font-size: 12px;
/* 文本的水平居中 */
text-align: center;
/* 文本垂直居中 单行文本垂直居中，当行高等于当前容器的高度时内部文字垂直居中 */
line-height:40px;
/* 设置背景颜色 */
background-color: #e3e2e2;
}
.banner_nav .active{
background-color: white;
color: #ab8e66;
/* 边框会增加元素的实际占位 */
border-bottom: 2px solid #cea861;
height: 38px;
}
</div>
<div class="banner_nav">
<!-- 网页还原过程中，如果需要编写对应的并列结构，直接使用无序列表进行开发 ul>li -->
<!-- 设置每一个li的大小 -->
<ul id="navWrap">
<li class="active" id="li1">EDG冠军战队皮肤预售 </li>
<li id="li2">精选皮肤限时五折</li>
<li id="li3">EDG冠军皮肤预售直播</li>
<li id="li4">杰作宝箱里程碑上线</li>
<li id="li5">开启你的赏金之旅</li>
</ul>
</div>
</div>
<script>
//找到对应的事件源：找到五个li标签放入数组中
// document.getElementsByTagName("li")
var navWrap=document.getElementById("navWrap") //先找事件源的容器
var lis=navWrap.getElementsByTagName("li")//找到navWrap下方所有的li
var imgWrap=document.getElementById("imgWrap")
//利用循环分发指定的事件
for(var n=0;n<lis.length;n++){
lis[n].index=n//分发索引值
lis[n].onmouseenter=function(){
// console.log(1)
//清除其他的选中样式 排他法
//先将所有的li的class都清除
for(var j=0;j<lis.length;j++){
lis[j].className=""
}
this.className="active"
//让指定ul 移动到对应位置 当前元素的索引值 * 820
// console.log(this.index)
imgWrap.style.marginLeft=-820*this.index+"px"
}
}
//间隔1s，切换一次图片
//如果是索引值，默认是从0开始 ，每调用一次定时器，随之递增，如果当前是最后一张图时，会到第一张
var index=0 //默认显示图片的索引值
var t1=setInterval(function(){
if(index==4){
index=0
}else{
index++ //递增一次
}
imgWrap.style.marginLeft=-820*index+"px"
//在图片切换的同时 让对应的导航 也添加上选中的样式
//让lis数组中li依次添加上选中
for(var j=0;j<lis.length;j++){
lis[j].className=""
}
lis[index].className="active"
},1000)
//当鼠标进入容器时， 定时器终止
var banner=document.getElementById("banner")
banner.onmouseenter=function(){
clearInterval(t1)
}
//鼠标离开 onmouseleave 以后 重新启动对应的定时器
banner.onmouseleave=function(){
t1=setInterval(function(){
if(index==4){
index=0
}else{
index++ //递增一次
}
imgWrap.style.marginLeft=-820*index+"px"
//在图片切换的同时 让对应的导航 也添加上选中的样式
//让lis数组中li依次添加上选中
for(var j=0;j<lis.length;j++){
lis[j].className=""
}
lis[index].className="active"
},1000)
}
// js事件编程：1.事件源 2.事件 3.事件处理函数
// 事件源：五个li
// 事件：鼠标进入事件 onmouseenter
// 数据处理函数：对应的li标签添加上选中样式，图片滚动到指定区域
// 通过id找到对应的元素
// 找到五个事件源
// var li1=document.getElementById("li1")
// var li2=document.getElementById("li2")
// var li3=document.getElementById("li3")
// var li4=document.getElementById("li4")
// var li5=document.getElementById("li5")
// var imgWrap=document.getElementById("imgWrap") //找到当前需要移动的 ul标签
// //当鼠标进入第一个li
// li1.onmouseenter=function(){
// // console.log(1)
// // 需要给自己添加上选中的样式， class=active
// //js中如何设置类名
// li1.className="active"
// //将除了自己以外所有li的选中样式 全部清除
// li2.className=""
// li3.className=""
// li4.className=""
// li5.className=""
// //当鼠标进入第一个li时，ul的margin-left 为0
// //设置指定标签的 样式
// imgWrap.style.marginLeft="0px"
// }
// //当鼠标进入 第二个li时
// li2.onmouseenter=function(){
// // console.log(1)
// // 需要给自己添加上选中的样式， class=active
// //js中如何设置类名
// li2.className="active"
// //将除了自己以外所有li的选中样式 全部清除
// li1.className=""
// li3.className=""
// li4.className=""
// li5.className=""
// //当鼠标进入第一个li时，ul的margin-left 为-820px
// imgWrap.style.marginLeft="-820px"
// }
// li3.onmouseenter=function(){
// // console.log(1)
// // 需要给自己添加上选中的样式， class=active
// //js中如何设置类名
// li3.className="active"
// //将除了自己以外所有li的选中样式 全部清除
// li1.className=""
// li2.className=""
// li4.className=""
// li5.className=""
// imgWrap.style.marginLeft="-1640px"
// }
// li4.onmouseenter=function(){
// // console.log(1)
// // 需要给自己添加上选中的样式， class=active
// //js中如何设置类名
// li4.className="active"
// //将除了自己以外所有li的选中样式 全部清除
// li1.className=""
// li3.className=""
// li2.className=""
// li5.className=""
// imgWrap.style.marginLeft="-2460px"
// }
// li5.onmouseenter=function(){
// // console.log(1)
// // 需要给自己添加上选中的样式， class=active
// //js中如何设置类名
// li5.className="active"
// //将除了自己以外所有li的选中样式 全部清除
// li1.className=""
// li3.className=""
// li4.className=""
// li2.className=""
// imgWrap.style.marginLeft="-3280px"
// }
</script>
