透明度轮播框架封装注意点zIndex值不能忘记

最新推荐文章于 2022-02-10 09:19:45 发布

weixin_30254435

最新推荐文章于 2022-02-10 09:19:45 发布

阅读量74

点赞数

原文链接：http://www.cnblogs.com/qfly/p/8818034.html

版权

<!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>

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.οnmοuseοver=function(){
btnArr.style.display="block";
clearInterval(timer1);//第七步
}
box.οnmοuseοut=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].οnmοuseοver=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.οnclick=function(){
autoStep();
}

// 6.点击左侧按钮
left.οnclick=function(){
k-=2;
autoStep();
}

</script>
</body>
</html>

转载于:https://www.cnblogs.com/qfly/p/8818034.html

weixin_30254435

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
透明度轮播框架封装注意点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:...
复制链接

扫一扫