<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
background: black;
}
.banner {
position: relative;
width: 900px;
height: 350px;
margin: auto;
}
.imglist {
width: 400px;
height: 200px;
position: absolute;
box-shadow: 0 0 15px #fff;
transition: all .1s linear;
}
.imglist > img {
width: 100%;
height: 100%;
}
.items {
position: absolute;
z-index: 10;
left: 0;
bottom: -40px;
width: 100%;
text-align: center;
}
.items > div {
width: 17px;
height: 17px;
margin: 0 5px;
border: 2px solid #fff;
box-sizing: border-box;
display: inline-block;
transform: rotate(45deg);
}
.bgcolor {
background: #17ff1e;
}
</style>
</head>
<body>
<div class="banner">
<div class="imglist" style="left: 250px;top: 150px;z-index: 5">
<img src="./img/1.jpg" alt=""/>
</div>
<div class="imglist" style="left:0px;top: 100px;z-index: 4">
<img src="./img/2.jpg" alt=""/>
</div>
<div class="imglist" style="left:0px;top: 50px;z-index: 3">
<img src="./img/3.jpg" alt=""/>
</div>
<div class="imglist" style="left:250px;top: 0px;z-index: 2">
<img src="./img/4.jpg" alt=""/>
</div>
<div class="imglist" style="left:500px;top: 50px;z-index: 3">
<img src="./img/5.jpg" alt=""/>
</div>
<div class="imglist" style="left:500px;top: 100px;z-index: 4">
<img src="./img/6.jpg" alt=""/>
</div>
<div class="items">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<script>
/*
* 1.网页加载完成 默认转动
*
* */
var lists = document.getElementsByClassName("imglist");
var item = document.getElementsByClassName("items")[0].children;
var speed = 1500;
var timer = null;
var index = 0//记录当前正面的那张图的索引
var count = 0;//用户操作的时候转的次数
var isanimate = true;//记录动画的状态
function animate() {
timer = setInterval(function () {
ShunAnimate();
addColor();
}, speed);
}
//顺时针动画
function ShunAnimate() {
var ele_0 = [lists[0].style.left, lists[0].style.top, lists[0].style.zIndex];
for (var i = 0; i < lists.length; i++) {
if (i < lists.length - 1) {
lists[i].style.left = lists[i + 1].style.left;
lists[i].style.top = lists[i + 1].style.top;
lists[i].style.zIndex = lists[i + 1].style.zIndex;
}
else {
lists[i].style.left = ele_0[0];
lists[i].style.top = ele_0[1];
lists[i].style.zIndex = ele_0[2];
}
if (lists[i].style.zIndex == 5) {
index = i;
}
}
}
function addMouseEnter() {
for (var i = 0; i < lists.length; i++) {
lists[i].onmouseenter = function () {
//停止计时器
clearInterval(timer);
}
lists[i].onmouseleave = function () {
animate();
}
}
}
function addColor() {
//下面的点跟随变化的一个方法
for (var i = 0; i < item.length; i++) {
//当前变色
if (i == index) {
item[i].className = "bgcolor";
}
else {
item[i].className = "";
}
}
}
function additemEvent() {
for (var i = 0; i < item.length; i++) {
item[i].index = i;
item[i].onmouseenter = function () {
clearInterval(timer);
if (isanimate) {
isanimate = false;
}
else {
return;
}
//进入当前的变色
count = this.index - index;
//顺时针动画
var num = 0;
var c = 0;
if (this.index > index) {
c = item.length - count;
}
else if (this.index < index) {
c = index - this.index;
}
loop();
function loop() {
num++;
if (num > c) {
console.log("动画完成");
isanimate = true;
return;
}
ShunAnimate();//0.3ms
setTimeout(loop, 100);
}
index = this.index;
addColor();
}
item[i].onmouseleave = function () {
animate();
}
}
}
window.onload = function () {
animate();
addMouseEnter();
addColor();
additemEvent();
}
</script>
</body>
</html>
三维轮播
最新推荐文章于 2023-03-24 10:11:07 发布