自制轮播实现

最新推荐文章于 2024-07-09 05:45:50 发布

wzs1232018

最新推荐文章于 2024-07-09 05:45:50 发布

阅读量217

点赞数

本文链接：https://blog.csdn.net/wzs1232018/article/details/115434108

版权

下面代码可以直接拷贝运行，样式和js代码都在

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</div> id="p2"

</body>

<style>

body{

/* perspective: 100px; */

}

.swiper-status{

width: 110px;

height: 16px;

margin: 5px auto;

/* background-color: red; */

display: flex;

justify-content: space-between;

}

.content{

/* transform-style: preserve-3d; */

position: relative;

height: 309px;

width: 750px;

background-color: pink;

margin: 10px auto;

overflow: hidden;

}

.content .stus{

position: absolute;

width: 110px;

height: 15px;

z-index: 5;

background-color: #fff;

}

.content div{

position: absolute;

height: 80%;

width: 616px;

/* top: 10%; */

/* margin: auto; */

left: 68px;

transition: all 0.5s;

}

div.sub1{

/* transform:translateZ(100px); */

background-color: green;

}

div.p1{

left: -582px;

height: 80%;

top: 10%;

z-index: 1;

}

div.sub2{

background-color: yellowgreen;

}

div.p2{

/* left: 716px;

height: 80%;

top: 10%; */

transform: scaleY(3.25);

z-index: 1;

}

div.sub3{

background-color: black;

}

div.p3{

left: 716px;

height: 80%;

top: 10%;

z-index: 1;

}

div.sub4{

background-color: red;

}

div.p4{

/* visibility: hidden; */

left: 1466px;

height: 80%;

top: 10%;

z-index: 0;

transition: none;

}

.swiper-status div{

height: 16px;

width: 16px;

background-color: #C9C9C9;

border-radius: 50%;

}

div.po1{

width: 45px;

background-color: #FF8100;

border-radius: 7px;

}

</style>

var d1=document.getElementById("d1")

window.οnlοad=function(){

var d1=document.getElementById("d1")

var d2=document.getElementById("d1")

var d3=document.getElementById("d1")

var d4=document.getElementById("d1")

}

function test(){

var d1=document.getElementById("d1")

var d2=document.getElementById("d2")

var d3=document.getElementById("d3")

var d4=document.getElementById("d4")

var p1=document.getElementById("p1")

var p2=document.getElementById("p2")

var p3=document.getElementById("p3")

var p4=document.getElementById("p4")

console.log("按钮被点击")

var i=1,k1=1,k2=2,k3=3,k4=4

console.log("i","k1","k2","k3","k4")

// while(true){

// }

setInterval(() => {

i=i>4?1:i

k1=isZero(k1-1)

k2=isZero(k2-1)

k3=isZero(k3-1)

k4=isZero(k4-1)

console.log(i,k1,k2,k3,k4)

d1.setAttribute("class", "sub1 p"+k1);

d2.setAttribute("class", "sub2 p"+k2);

d3.setAttribute("class", "sub3 p"+k3);

d4.setAttribute("class", "sub4 p"+k4);

// sleep(1000)

p1.setAttribute("class", "sub1 po"+k1);

p2.setAttribute("class", "sub2 po"+k2);

p3.setAttribute("class", "sub3 po"+k3);

p4.setAttribute("class", "sub4 po"+k4);

i++

}, 1000);

}

function isZero(k){

return k<=0?4:k

}

var sleep = function(time) {

var startTime = new Date().getTime() + parseInt(time, 10);

while(new Date().getTime() < startTime) {}

};

</script>

</html>

wzs1232018

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自制轮播实现

下面代码可以直接拷贝运行，样式和js代码都在<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-sca...
复制链接

扫一扫