<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="font-awesome.css">
<style>
.banner{
width: 100%;
position: relative;
background-color: black;
}
.banner img{
width: 100%;
}
button{
position: absolute;
width: 50px;
height: 10%;
top: 45%;
background-color: #262525;
border: none;
}
.bLeft{
left: 0;
}
.bRight{
right: 0;
}
button .fa{
color: #e2e2e2;
font-size: 30px;
}
.point{
position: absolute;
width: 50%;
bottom: 20px;
text-align: center;
}
.point li{
width: 16px;
height: 16px;
border: 3px #fff solid;
background-color: #fff;
border-radius:50%;
display: inline-block;
}
.point li.active{
background-color: #0a0b0d;
}
</style>
</head>
<body>
<div class="banner" id="banner">
<img src="img/pic1.jpg" id="img1"/>
<button class="bLeft"><i class="fa fa-chevron-left"></i></button>
<button class="bRight"><i class="fa fa-chevron-right"></i></button>
<ul class="point">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
<script src="myjs.js"></script>
<script>
var arr = ["img/pic1.jpg","img/pic2.jpg","img/pic3.jpg"];
var index = 0;
var oImg = document.getElementById("img1");
var aBtn = document.getElementById("banner").getElementsByTagName("button");
var aLi = document.getElementById("banner").getElementsByTagName("li");
aBtn[0].onclick = function (){
toPic("p");
};
aBtn[1].onclick = function (){
toPic("n");
};
setInterval(function (){
toPic("n");
},4000);
for(var i=0;i<aLi.length;i++){
aLi[i].index = i;
aLi[i].onclick = function (){
index = this.index;
toPic();
}
}
function toPic(nop){
doMove(oImg,0.08,0,"opacity",function (){
if(nop=="n"){
index = index==2 ? 0 : index+1;
}else if(nop=="p"){
index = index==0 ? 2 : index-1;
}
oImg.src = arr[index];
for(var i=0;i<aLi.length;i++){
aLi[i].className = "";
}
aLi[index].className = "active";
doMove(oImg,0.08,1,"opacity");
})
}
</script>
</body>
</html>
html淡入淡出的轮播图
最新推荐文章于 2021-06-21 13:26:22 发布