Carousel slide

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
font-size: 16px;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
img{
vertical-align: middle;
}

#banner{
width: 830px;
height: 482px;
margin: 100px auto;
position: relative;
}

#banner li{
/* display: none; */

opacity: 0;
position: absolute;
left: 0;
top: 0;
transition: .5s;
}
#banner li.active{
/* display: block; */

opacity: 1;
}

.leftBtn, .rightBtn{
width: 30px;
height: 64px;
position: absolute;
top: 50%;
margin-top: -32px;
background-image: url(images/index.png);

cursor: pointer;
display: none;
}
.leftBtn{
left: 20px;
background-position: -82px -145px;
}
.leftBtn:hover{
background-position: -161px -145px;
}
.rightBtn{
right: 20px;
background-position: -120px -145px;
}
.rightBtn:hover{
background-position: -198px -145px;
}

.circle{
width: 100%;
position: absolute;
bottom: 20px;
text-align: center;
font-size: 0;
}
.circle span{
display: inline-block;
width: 20px;
height: 20px;
background: #fff;
background: url(images/index.png) -26px -100px;
cursor: pointer;
margin: 0 5px;
}
.circle span.active{
background: url(images/index.png) 0 -100px;
}

</style>
</head>

<body>

 


<div id="banner">
<ul class="img">
<li class="active"><a href="#"><img src="images/01.png" alt=""></a></li>
<li><a href="#"><img src="images/02.png" alt=""></a></li>
<li><a href="#"><img src="images/03.png" alt=""></a></li>
<li><a href="#"><img src="images/04.png" alt=""></a></li>
<li><a href="#"><img src="images/05.png" alt=""></a></li>
<li><a href="#"><img src="images/06.png" alt=""></a></li>
<li><a href="#"><img src="images/07.png" alt=""></a></li>
<li><a href="#"><img src="images/08.png" alt=""></a></li>
</ul>

<div class="leftBtn"></div>
<div class="rightBtn"></div>

<div class="circle">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>

<script>
var banner=document.querySelector('#banner');
var lis=document.querySelectorAll('#banner li');
var spans=document.querySelectorAll('.circle span');
var leftBtn=document.querySelector('.leftBtn');
var rightBtn=document.querySelector('.rightBtn');

var cn=0; //当前次点击对应的索引
var ln=0; //上一次选中的图片对应的索引

for(var i=0;i<spans.length;i++){
spans[i].index=i;
spans[i].onclick=function(){
cn=this.index;
/* //console.log(this.index);

lis[ln].className='';
lis[cn].className='active';

spans[ln].className='';
spans[cn].className='active';

//lis[ln].className=spans[ln].className='';
//lis[cn].className=spans[cn].className='active';

ln=cn; //当前次点击的索引相对于下一次点击来说就是上一次的索引 */

change();
};
}

function change(){
lis[ln].className=spans[ln].className='';
lis[cn].className=spans[cn].className='active';
ln=cn;
}

leftBtn.onclick=function(){
cn--;
if(cn<0){
cn=lis.length-1;
}

change();
};

rightBtn.onclick=function(){
cn++;
if(cn>lis.length-1){
cn=0;
}

change();
};

var timer=setInterval(rightBtn.onclick,2000);

banner.onmouseover=function(){
leftBtn.style.display=rightBtn.style.display="block";
clearInterval(timer);
};
banner.onmouseout=function(){
leftBtn.style.display=rightBtn.style.display="none";

timer=setInterval(rightBtn.onclick,2000);
};
</script>
</body>
<html>

Carousel slide

上一篇:Frida 安卓逆向破解Unity游戏IL2CPP


下一篇:基于FakerAndroid的一次il2cpp游戏逆向精修实录!!!零汇编零二进制纯编码实现