透明度轮播框架封装注意点zIndex值不能忘记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body,ul,ol{
margin:0;
padding:0;
border: 0;
}
li{
list-style: none;
}
#box{
width: 490px;
height: 170px;
padding: 5px;
border:1px solid #000;
margin:100px auto;
position: relative;
}
#ad{
width: 490px;
height: 170px;
overflow: hidden;
position: relative;
}
#box ul{
width: 2450px;
height: 170px;
position: absolute;
}
#box ul li{
position: absolute;
left: 0;top: 0;
opacity: 0;
}
#box ul li img{width: 490px;}
#box ol{
position: absolute;
right: 10px;
bottom: 10px;
z-index: 2;
width: 160px;
height: 22px;
}
#box ol li{
width: 20px;
height: 20px;
float: left;
margin-right: 8px;
border:1px solid #ccc;
background-color: #fff;
text-align:center;
line-height: 20px;
}
#box ol li.current{
background-color: yellow;
}
#btnArr{
width: 490px;
height: 40px;
position: absolute;
z-index: 10;
display: none;
left: 5px;
top: 50%;
margin-top: -20px;
}
#btnArr span{
width: 40px;
height: 40px;
position: absolute;
font-size: 20px;
font-family: "宋体";
color: #fff;
background-color: rgba(0,0,0,0.5);
text-align: center;
line-height: 40px;
}
#right{
right: 0;
}
</style>
</head>
<body>
<div id="box">
<div id="ad">
<ul>
<li style="opacity: 1;z-index:1"><img src="img/1.jpg" ></li>
<li><img src="img/2.jpg" ></li>
<li><img src="img/3.jpg" ></li>
<li><img src="img/4.jpg" ></li>
<li><img src="img/5.jpg" ></li>
</ul>
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
<div id="btnArr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
<script src="animate.js"></script>
<script>
var box=document.getElementById('box');
var ad=box.children[0];
var ul=box.getElementsByTagName('ul')[0];
var ulliArr=ul.children;
console.log(ulliArr);
var ol=box.getElementsByTagName('ol')[0];
var olLiArr=ol.children;
var btnArr=document.getElementById('btnArr');
var left=document.getElementById('left');
var right=document.getElementById('right');
var imgWidth=ad.offsetWidth;
// 两个定时器，一个控制透明度，一个控制zIndex
var timer=null;
var timer1=null;
var k=0;//计数器 控制当前图片是哪一张
// 需求，开启两个定时器，一个控制透明度，一个控制图片的ZINDEX切换
// 1.鼠标经过box的时候，btnArr显示，移开隐藏
// 2.自动轮播 开启定时器，每2s k++ 封装autoStep 调用autoOPa()
// 3.鼠标经过小方块，排他思想，显示当前
// 4.关联索引值
// 5.点击右侧按钮，执行autoStep()
// 6.点击左侧按钮，k--
// 7.鼠标经过box的时候，清楚自动轮播的定时器 timer1，移开设置
// 1.鼠标经过box的时候，btnArr显示，移开隐藏
box.onmouseover=function(){
btnArr.style.display="block";
clearInterval(timer1);//第七步
}
box.onmouseout=function(){
btnArr.style.display="none";
timer1=setInterval(autoStep,2000);//第七步
}
// 2.自动轮播 开启定时器，每2s k++ 封装autoStep 调用autoOPa()
// 每2秒走一步
function autoStep(){
k++;
if(k>4){
k=0;
}
if(k<0){
k=4;
}
// 控制小方块自增
// 排他
for(var i=0; i<olLiArr.length;i++){
olLiArr[i].className="";
ulliArr[i].style.zIndex=0;
}
// 注意点，当前图片的zIndex提高
ulliArr[k].style.zIndex=1;
animate(ulliArr[k],{opacity:100});
// 显示当前
olLiArr[k].className="current";
}
// 自动轮播
function autoPlay(){
if(timer1){
clearInterval(timer1);
}
timer1=setInterval(autoStep,2000)
}
autoPlay();
// 3.鼠标经过小方块，排他思想，显示当前
for(var i=0; i<olLiArr.length; i++){
olLiArr[i].onmouseover=function(){
for(var j=0; j<olLiArr.length; j++){
olLiArr[j].className="";
ulliArr[j].style.zIndex=0;
if(this==olLiArr[j]){
olLiArr[j].className="current";
// 4关联索引值
k=j;
// 这里的k代表当前是哪一张图片
// 注意点，当前图片的zIndex提高
ulliArr[k].style.zIndex=1;
animate(ulliArr[k],{opacity:100});
// 让当前图片从0到1进行透明度渐变
}
}
}
}
// 5.点击右侧按钮
right.onclick=function(){
autoStep();
}
// 6.点击左侧按钮
left.onclick=function(){
k-=2;
autoStep();
}
</script>
</body>
</html>
