以下那些注释呢,都是要靠自己理解才是最重要的,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.banner{width: 800px;height: 300px;margin: 0 auto;position: relative;}
.banner img{width: 100%;height: 100%;}
ul{position: absolute;left: 45%;transform:translate(-50%,0);bottom: 15px;list-style: none;}
li{float: left;width: 30px;height: 30px;background:rgba(0,0,0,.5);border-radius: 50%;text-align: center;line-height: 30px;font-weight: bold;margin-right:10px ;}
#zleft,#yright{width:0px;position: absolute;top: 0;line-height: 300px;font-size: 80px;font-weight: bold;color: white;background: rgba(255,255,255,0.3);overflow: hidden;transition: 0.8s;}
#zleft{left: 0;}
#yright{right: 0;}
</style>
</head>
<body onload="dong()"><!--进入页面先行加载某个函数-->
<div class="banner">
<img src="img/t0.jpg" />
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="zleft"><</div>
<div id="yright">></div>
</div>
<script>
//获取所有需要的东西;
var banner=document.getElementsByClassName("banner")[0];
var lis=document.getElementsByTagName("li");
var zleft=document.getElementById("zleft");
var yright=document.getElementById("yright");
var imgs=document.getElementsByTagName("img")[0];
var timer=setInterval("dong()",1000); //给图片定时,让图片按定时器秒数动;
var index=-1; //给图片给初始值;
function dong(){
index++;
resetColor(); //5.调用函数
lis[index].style.backgroundColor="yellow";//4.给轮播点做选中状态
imgs.src="img/"+"t"+index+".jpg"; //1.获取图片路径
if(index==3){ //3.判断关键节点,最后一张与第一张的关联;
index=0;
}
//2.路径循环
}
function resetColor(){ //5.创建一个函数(清楚上一个轮播点的状态)
for(var i=0;i<lis.length;i++){
lis[i].style.backgroundColor="rgba(255,255,255,.3)"
}
}
// btn点击
for (var i=0;i<lis.length;i++) { //1.循环轮播点
lis[i].onclick = function(){ //2.给轮播点做点击
clearInterval(timer);//5.清楚名为timer的定时器
index = this.innerHTML-1; //3.当前下标等于页面中的数字;注意:后面的减一;
imgs.src = "img/"+"t"+index +".jpg";//4.获取图片路径
resetColor();//6.获取上面的,清楚上一个轮播点的状态的函数
lis[index].style.background = "yellow"//6.清楚函数的样式
}
}
// 鼠标悬浮banner
banner.onmouseover = function(){//1.鼠标放到banner上的时候
clearInterval(timer); //3.清楚定时器
zleft.style.width = yright.style.width = "60px"; //2.两边按钮出现;这里要注意,上面设置按钮宽度的时候,给宽设置为0px
}
banner.onmouseout = function(){//1.鼠标离开banner上的时候
timer = setInterval("dong()",1000);//3.恢复轮播动
zleft.style.width = yright.style.width = "0px";//2.两边按钮消失
}
zleft.onclick = function(){//左边按钮点击
index--;
if (index ==-1){//最后一张,与第一张之间的衔接
index = 3;
}
resetColor()//获取清楚轮播点的函数
lis[index].style.background ="yellow"
imgs.src = "img/"+"t"+index+".jpg";//获取图片路径
}
yright.onclick = function(){
index++;
if (index == 4){
index = 0;
}
resetColor()
lis[index].style.background = "yellow"
imgs.src = "img/"+"t"+index+".jpg";
}
</script>
</body>
</html>
