js+css实现卡⽚轮播图效果本⽂实例为⼤家分享了js+css实现卡⽚轮播图效果的具体代码，供⼤家参考，具体内容如下
实现点击的时候切换卡⽚，⾃动轮播，⿏标移⼊暂停，移出继续轮播，有动画事件
效果就是这样
下⾯是代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 680px;
padding: 50px;
margin: auto;
margin-top: 300px;
}
.swiper,
#swiper {
width: 830px;
height: 200px;
position: relative;
}
.swiper div {
display: block;
position: absolute;
width: 500px;
height: 200px;
overflow: hidden;
left: 165px;
top: 0;
transition: 0.5s;
color: #fff;
font-size: 50px;
text-align: center;
line-height: 200px;
}
.swiper div:nth-child(1) {
background: #1ebe09;
}
.swiper div:nth-child(2) {
background: #323a31;
}
.swiper div:nth-child(3) {
background: #0985be;
}
.swiper div:nth-child(4) {
background: #090cbe;
}
.swiper div:nth-child(5) {
background: #be5109;
}
.swiper div:nth-child(6) {
background: #be09af;
}
.
swiper div:nth-child(7) {
background: #be8e09;
}
.swiper div:nth-child(8) {
background: #be0909;
}
.swiper div:nth-child(9) {
background: #06162c;
}
.swiper .a {
opacity: 1;
z-index: 23;
-webkit-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
-ms-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
js实现轮播图最简代码transform: perspective(500px) translateX(300px) translateZ(-253px) rotateY(-45deg);
-webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));        }
.swiper .b {
opacity: 1;
z-index: 33;
-webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));            transform: translateX(0) translateZ(-100px) rotateY(0deg)
}
.swiper .c {
opacity: 1;
z-index: 23;
-webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3)));            -webkit-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
-ms-transform: translateX(255px) translateZ(-300px) rotateY(-45deg);
transform: perspective(500px) translateX(-300px) translateZ(-253px) rotateY(45deg);
}
.swiper .dd {
opacity: 0;
z-index: -1;
-webkit-transform: translateX(0) translateZ(-300px) rotateY(0);
-ms-transform: translateX(0) translateZ(-300px) rotateY(0);
transform: perspective(500px) translateX(0) translateZ(-253px) rotateY(0);
}
</style>
</head>
<body>
<div class="box">
<div class="swiper" id="swiper">
<div class="swiper-time b">1</div>
<div class="swiper-time a">2</div>
<div class="swiper-time dd">3</div>
<div class="swiper-time dd">4</div>
<div class="swiper-time dd">5</div>
<div class="swiper-time dd">6</div>
<div class="swiper-time dd">7</div>
<div class="swiper-time dd">8</div>
<div class="swiper-time c">9</div>
</div>
</div>
<script>
const time = 3000 ;  //⾃动播放速度
var index = 0  // 索引
const swiperitem = ElementById('swiper') //获取⽗元素
const swiper = ElementsByTagName('div') //获取合集
//    ⾃动轮播
var setTime = setInterval(() => {
if (index < swiper.length-1) {
index++
} else {
index = 0
}
style()
}, time)
// 点解切换
for (let i = 0; i < swiper.length; i++) {
swiper[i].onclick = function () {
if (i === index) return
index = i
style()
}
}
// ⿏标移⼊暂停
clearInterval(setTime)
}
// ⿏标移出继续轮播
setTime = setInterval(() => {
if (index < swiper.length-1) {
index++
} else {
index = 0
}
style()
}, time)
}
// 滚动事件
function style() {
console.log(index)
for (let i = 0; i < swiper.length; i++) {
swiper[i].className = 'swiper-time dd'
}
if (index === swiper.length - 1) {
swiper[index].className = 'swiper-time b'
swiper[0].className = 'swiper-time a'
swiper[index - 1].className = 'swiper-time c'
} else if (index === 0) {
swiper[index].className = 'swiper-time b'
swiper[index + 1].className = 'swiper-time a'
swiper[swiper.length - 1].className = 'swiper-time c'
} else {
swiper[index].className = 'swiper-time b'
swiper[index + 1].className = 'swiper-time a'
swiper[index - 1].className = 'swiper-time c'
}
}
</script>
</body>
</html>
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。