轮播图之淡入淡出代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>淡入淡出</title>
<style>
* {
padding: 0;
margin: 0;
}
.content {
width: 400px;
height: 300px;
border: solid 1px gray;
margin: auto;
position: relative;
}
.pic {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 300px;
transition: opacity 0.5s linear;
}
img {
width: 400px;
height: 300px;
}
.circle {
width: 72px;
height: 8px;
position: absolute;
bottom: 20px;
left: 150px;
font-size: 0;
line-height: 8px;
z-index: 999;
}
.circle>div {
display: inline-block;
width: 6px;
height: 6px;
border: solid 1px #fff;
margin: 0 2px;
border-radius: 50%;
}
.bgc {
background-color: #fff;
}
.btn {
position: absolute;
bottom: 130px;
left: 0;
height: 30px;
width: 100%;
z-index: 999;
}
.btn>div {
width: 30px;
height: 30px;
background-color: rgba(180, 177, 177, 0.4);
font-size: 18px;
line-height: 30px;
text-align: center;
color: #fff;
cursor: pointer;
}
.btn>div:nth-child(1) {
float: left;
}
.btn>div:nth-child(2) {
float: right;
}
</style>
</head>
<body>
<div class="content">
<div style="z-index: 6" class="pic"><a href=""><img src="img/1.jpg" alt=""></a></div>
<div style="z-index: 5" class="pic"><a href=""><img src="img/2.jpg" alt=""></a></div>
<div style="z-index: 4" class="pic"><a href=""><img src="img/3.jpg" alt=""></a></div>
<div style="z-index: 3" class="pic"><a href=""><img src="img/4.jpg" alt=""></a></div>
<div style="z-index: 2" class="pic"><a href=""><img src="img/5.jpg" alt=""></a></div>
<div style="z-index: 1" class="pic"><a href=""><img src="img/6.jpg" alt=""></a></div>
<div class="circle">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="btn">
<div>
<</div> <div>>
</div>
</div>
</div>
<script>
var speed = 1000;
var content = document.getElementsByClassName("content")[0];
var pic = document.getElementsByClassName("pic");
var zindex = 0;
var timer = null;
var index = 0;
var circle = document.getElementsByClassName("circle")[0].children;
var btn = document.getElementsByClassName("btn")[0].children;
function move(res, count) {
for (var k = 0; k < count; k++) {
for (var i = 0; i < pic.length; i++) {
zindex = parseInt(pic[i].style.zIndex);
if (res == "right") {
zindex++;
if (zindex > pic.length) {
zindex = 1;
pic[i].style.opacity = "0";
}
if (zindex == pic.length) {
pic[i].style.opacity = "1"
index = i;
}
} else {
zindex--;
if (zindex == 0) {
zindex = 6;
pic[i].style.opacity = "1";
index = i;
}
else if (zindex == pic.length - 1) {
pic[i].style.opacity = "0";
}
}
pic[i].style.zIndex = zindex;
addColor();
}
}
}
function animate() {
timer = setInterval(function () {
move("right", 1);
}, speed);
}
function addColor() {
for (var i = 0; i < circle.length; i++) {
if (index == i) {
circle[i].className = "bgc";
} else {
circle[i].className = "";
}
}
}
window.onload = function () {
animate();
addColor();
content.onmouseenter = function () {
clearInterval(timer);
}
content.onmouseleave = function () {
animate();
}
for (var i = 0; i < circle.length; i++) {
circle[i].index = i;
circle[i].onmouseenter = function () {
count = this.index - index > 0 ? this.index - index : circle.length + (this.index - index);
move("right", count);
index = this.index;
addColor();
}
}
btn[0].onclick = function () {
move("left", 1);
}
btn[1].onclick = function () {
move("right", 1);
}
}
</script>
</body>
</html>
效果展示
鼠标进入与离开
圆点相关
按钮点击