立体轮播图效果展示
HTML代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.block {
position: relative;
width: 900px;
height: 370px;
margin: 0 auto;
overflow: hidden;
}
.imagePar > div {
position: absolute;
width: 400px;
height: 200px;
transition: all 0.5s linear;
}
.imagePar > div:nth-child(1) {
top: 150px;
left: 250px;
z-index: 6;
}
.imagePar > div:nth-child(2) {
top: 100px;
left: 0;
z-index: 5;
}
.imagePar > div:nth-child(3) {
top: 50px;
left: 0;
z-index: 4;
}
.imagePar > div:nth-child(4) {
top: 0;
left: 250px;
z-index: 3;
}
.imagePar > div:nth-child(5) {
top: 50px;
left: 500px;
z-index: 4;
}
.imagePar > div:nth-child(6) {
top: 100px;
left: 500px;
z-index: 5;
}
.imagePar > div > img {
width: 400px;
height: 200px;
}
.imagePar{
position: relative;
width: 900px;
height: 350px;
}
.btn{
width: 900px;
height: 40px;
position: absolute;
top: 155px;
z-index: 10;
}
.btn>span:nth-child(1){
width: 30px;
background-color: #909090;
color: white;
display: block;
float: left;
text-align: center;
line-height: 40px;
margin-left: -30px;
cursor: pointer;
opacity: 0;
transition: all 0.5s linear;
}
.btn>span:nth-child(2){
color: white;
width: 30px;
background-color: #909090;
display: block;
float: right;
text-align: center;
line-height: 40px;
margin-right: -30px;
cursor: pointer;
opacity: 0;
transition: all 0.5s linear;
}
.marleft{
margin-left:0 !important;
opacity: 1 !important;
}
.marright{
margin-right:0 !important;
opacity: 1 !important;
}
.dian{
width: 108px;
height: 14px;
position: absolute;
bottom: 0;
left: 396px;
z-index: 10;
}
.dian>div{
width: 14px;
height: 14px;
border-radius: 50%;
background-color: white;
float: left;
margin: 0 2px;
border: 2px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="block">
<div class="imagePar">
<div><img src="./img/111.jpg" alt=""/></div>
<div><img src="./img/222.jpg" alt=""/></div>
<div><img src="./img/333.jpg" alt=""/></div>
<div><img src="./img/444.jpg" alt=""/></div>
<div><img src="./img/555.jpg" alt=""/></div>
<div><img src="./img/666.jpg" alt=""/></div>
</div>
<div class="btn">
<span><</span>
<span>></span>
</div>
<div class="dian">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<script src="js/imageslider.js"></script>
</body>
</html>
JavaScript代码
/**
* Created by Administrator on 2019/1/19.
*/
//获取imagePar 拿到子集
var imagePar = document.getElementsByClassName("imagePar")[0];
var imgchild = imagePar.children;
//获取点点
var dianChild = document.getElementsByClassName("dian")[0].children;
dianChild[0].style.backgroundColor = "#000000"; //默认颜色
showImage();
var time;
function showImage() {
time = setInterval(function () {
countTmage("left", 0);
}, 1500);
}
function countTmage(dec, cindex) {
//先存储第一张的样式�
var firstpage = {
left: window.getComputedStyle(imgchild[cindex]).left,
top: window.getComputedStyle(imgchild[cindex]).top,
zIndex: window.getComputedStyle(imgchild[cindex]).zIndex,
backcolor: window.getComputedStyle(dianChild[cindex]).backgroundColor
};
if (dec == "left") {
for (var i = 0; i < imgchild.length; i++) {
if (i == imagePar.children.length - 1) {
imgchild[i].style.left = firstpage.left;
imgchild[i].style.top = firstpage.top;
imgchild[i].style.zIndex = firstpage.zIndex;
dianChild[i].style.backgroundColor = firstpage.backcolor;
}
else {
imgchild[i].style.left = window.getComputedStyle(imgchild[i + 1]).left;
imgchild[i].style.top = window.getComputedStyle(imgchild[i + 1]).top;
imgchild[i].style.zIndex = window.getComputedStyle(imgchild[i + 1]).zIndex;
dianChild[i].style.backgroundColor = window.getComputedStyle(dianChild[i + 1]).backgroundColor;
}
}
}
else {
for (var i = imgchild.length - 1; i >= 0; i--) {
if (i == 0) {
imgchild[i].style.left = firstpage.left;
imgchild[i].style.top = firstpage.top;
imgchild[i].style.zIndex = firstpage.zIndex;
dianChild[i].style.backgroundColor = firstpage.backcolor;
}
else {
imgchild[i].style.left = window.getComputedStyle(imgchild[i - 1]).left;
imgchild[i].style.top = window.getComputedStyle(imgchild[i - 1]).top;
imgchild[i].style.zIndex = window.getComputedStyle(imgchild[i - 1]).zIndex;
dianChild[i].style.backgroundColor = window.getComputedStyle(dianChild[i - 1]).backgroundColor;
}
}
}
firstpage = null;
}
document.onselectstart = function () {
return false; // 避免多次点击 被选中
};
var block = document.getElementsByClassName("block")[0];
var btn = document.getElementsByClassName("btn")[0];
var btnChild = btn.children;
block.onmouseenter = function () { //鼠标移入
clearInterval(time);
for (var i = 0; i < btnChild.length; i++) {
btnChild [i].className = i ? "marright" : "marleft"; //0表示alse
}
/*btnChild [0].className ="marleft";
btnChild[1].className ="marright";*/
};
block.onmouseleave = function () {
showImage();
for (var i = 0; i < btnChild.length; i++) {
btnChild [i].className = "";
}
};
//左右俩边点击事件
btnChild[0].onclick = function (e) {
if (e.detail == 1) { //控制点击次数
countTmage("left", 0);
}
};
btnChild[1].onclick = function (e) {
if (e.detail == 1) {
countTmage("right", imgchild.length - 1);
}
};
//点点的事件
for (var i = 0; i < dianChild.length; i++) {
dianChild[i].index = i;
dianChild[i].onclick = function () {
for (var k = 0; k < dianChild.length; k++) {
dianChild[k].style.transitionDuration = "0.1s";
}
//获取之前黑色点的索引 rgb(0, 0, 0) 有空格的问题
var oldindex = 0;
for (var k = 0; k < dianChild.length; k++) {
if (dianChild[k].style.backgroundColor == 'rgb(0, 0, 0)') {
oldindex = dianChild[k].index;
}
}
var num = 0; //用来判断总共需要转多少次
/*如果当前索引大于之前索引 left-right ("right",5) 小于之前索引 right-left (left,0)*/
if (this.index > oldindex) {
num = this.index - oldindex;
var timego = setInterval(function () {
// 修改图片的过渡时间加快动画的进程 防止多张同时动
num--;
if (num < 0) {
clearInterval(timego);
}
else {
countTmage("right", 5)
}
}, 100);
}
else {
num = Math.abs(this.index - oldindex);
var timego = setInterval(function () {
// 修改图片的过渡时间加快动画的进程 防止多张同时动
num--;
if (num < 0) {
clearInterval(timego);
}
else {
countTmage("left", 0)
}
}, 100);
}
}
}
//窗体失焦获焦
document.addEventListener("visibilitychange", function () {
if (!document["hidden"]) {
//激活
showImage();
} else {
clearInterval(time);
}
});