js+css实现卡片轮播图效果
更新时间：2022年02月23日 09:37:49 作者：little_shallot
这篇文章主要为大家详细介绍了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);
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 = document.getElementById('swiper') //获取父元素
const swiper = swiperitem.getElementsByTagName('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()
}
}
// 鼠标移入暂停
swiperitem.onmouseover = function () {
clearInterval(setTime)
}
// 鼠标移出继续轮播
swiperitem.onmouseout = function () {
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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
JavaScript知识点总结(六)之JavaScript判断变量数据类型
这篇文章主要介绍了JavaScript知识点总结(六)之JavaScript判断变量数据类型的相关资料，非常不错具有参考借鉴价值,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了微信小程序ajax实现请求服务器数据及模版遍历数据功能,结合实例形式分析了微信小程序ajax调用及模板wx:for循环列表渲染相关操作技巧,需要的朋友可以参考下2017-12-12
实现token无感刷新对于前端来说是一项十分常用的技术,这篇文章主要给大家介绍了关于前端双token无感刷新的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
JavaScript语句错误throw、try及catch实例解析
这篇文章主要介绍了JavaScript语句错误throw、try及catch实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
本篇文章主要介绍了Bootstrap 填充Json数据的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
这篇文章主要介绍了微信小程序实现上拉加载功能,结合实例形式分析了微信小程序加载更多数据、触底加载或点击加载更多数据的相关实现技巧与操作注意事项,需要的朋友可以参考下2020-05-05
这篇文章主要为大家详细介绍了微信小程序支付功能，分享了php后台对接完整代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-06-06
小程序里图片会显示不全，这时就应该做相应的处理，使小程序里图片显示正确，这篇文章主要介绍了微信小程序实现富文本图片宽度自适应的方法，感兴趣的小伙伴们可以参考一下2019-01-01
2007-12-12
今天小编就为大家分享一篇layer.alert自定义关闭回调事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
最新评论