卡片式轮播图效果实现

基于 react 实现，vue 类似

效果图

思路

效果图中绿色边框为轮播图区域
水平式多张图片水平排列整体宽度为单张图片n倍 translateX 位移方式一次整体移动一张图片宽度
层叠式所有图片居中堆叠动态计算左右每张图片 translateX 位移、 scale 缩放、 zIndex 层级，实现堆叠效果

jsx

import React, { Component } from 'react'
import './cardCarousel.less'
export default class CardCarousel extends Component {constructor(props){super(props)this.state = {list:[1,2,3,4,5,6],current: 1, // 轮播图当前 indexitemWidth:0, //  图片区域 宽度out: 3,  // 堆叠式 外部看到的数量 （左右各相同） 不限制 可以设置 0 或 大于轮播图数量offset:80, // 堆叠式 外部偏移量 (产生堆叠效果)}}componentDidMount(){// 获取轮播图片区域宽度const width = this.refs.swiperitem.clientWidththis.setState({itemWidth:width})}// 上一张onPrev = (index) => {const length = this.state.list.lengthif( index - 1 < 0) {this.setState({current : length -1})}else {this.setState({current : index -1 })}}// 下一张onNext = (index) => {const length = this.state.list.lengthif ( index + 1 === length) {this.setState({current: 0})}else{this.setState({current: index + 1})}}render() {let  {list,current,itemWidth,out,offset} = this.state// 水平式   计算轮播区整体位移let x = current === 0 ? 0 : - current*itemWidth +'px'const translateX = `translateX(${x})`return (<div className="card-carousels">{/* 水平卡片式 */}<h3>水平卡片式</h3><div className='wrapper'><div className='inner'><div ref='swiper' className='swiper' style = {{ transform: translateX}}>{list.map( (item,key) => (<div ref='swiperitem' className={['swiper-item', key === current ? 'current' : ''].join(" ")} key={key}><div className='pic' >{item}</div></div>))}    </div></div>{/* {点击按扭} */}<div className='btn-prev' onClick = { () => this.onPrev(current)}>《</div><div className='btn-next' onClick= { () => this.onNext(current)}>》</div></div>{/* 层叠卡片式 */}<h3>层叠式</h3><div className='wrapper'><div className='inner'><div className='swiper2'>{list.map((item , index ) => {// 层叠式 计算各张图片 translateX scale  z-index 产生堆叠效果let transform = 'none'let zIndex = 0if(out ? index < current && current - index <= out : index < current){// 左边 堆叠zIndex = index +1transform = `translateX(${(index - current)*offset}px) scale(${1-(current-index)*0.1})`}else if(out ?  index > current && index - current <= out : index> current){// 右边 堆叠zIndex = list.length - indextransform = `translateX(${(index - current)*offset}px) scale(${1-(index-current)*0.1})`}else if (index === current){// 当前图片zIndex = list.length}return (<div className='swiper-item' key={index} style={{transform:transform,zIndex:zIndex}}>{item}</div>)})}</div></div></div></div>)}
}

less

.card-carousels{div{box-sizing: border-box;}.wrapper{width:800px;margin:30px auto;border:1px solid #ccc;overflow: hidden;display: flex;justify-content: center;align-items: center;position: relative;.btn-prev,.btn-next{position: absolute;width: 40px;height: 40px;background: rgba(0,0,0,.3);color: white;line-height: 40px;text-align: center;z-index: 9;cursor:pointer}.btn-prev{left:0;}.btn-next{right:0;}.inner{height:200px;border:4px solid green;position: relative;width: 400px;.swiper{position: absolute;top:0;left: 0;height: 100%;min-width: 100%;display: flex;flex-wrap: nowrap;transition: all 0.5s;.swiper-item{padding:0 20px;// border:1px solid yellowgreen;width: 400px;transition:all 0.5s;transform: scale(0.8);&.current{transform:scale(1);}.pic{border:1px solid pink;border-radius: 20px;height: 100%;line-height: 200px;font-size: 50px;background:#ccc; }}}.swiper2, .swiper2 .swiper-item{position: absolute;left:0;top:0;width:100%;height: 100%;font-size: 50px;text-align: center;line-height: 150px;}.swiper2 .swiper-item{transition: transform .5s;border:20px solid #ccc;color:black;border-radius: 20px;background: white;}}}
}

3d效果
添加css 属性 transform-style: preserve-3d; perspective: 500px; 及 js 部分计算 rotateY

<div className='swiper2'>{list.map((item , index ) => {// 层叠式 计算各张图片 translateX scale  z-index 产生堆叠效果let transform = 'none'let origin = 'center center'let zIndex = 0if(out ? index < current && current - index <= out : index < current){// 左边 堆叠origin = 'left center'zIndex = index +1transform = `translateX(${(index - current)*offset}px) scale(${1-(current-index)*0.1}) rotateY(80deg)`}else if(out ?  index > current && index - current <= out : index> current){// 右边 堆叠origin = 'right center'zIndex = list.length - indextransform = `translateX(${(index - current)*offset}px) scale(${1-(index-current)*0.1}) rotateY(-80deg)`}else if (index === current){// 当前图片zIndex = list.length}return (<div className='swiper-item' key={index} style={{transform:transform,zIndex:zIndex,transformOrigin:origin}}>{item}</div>)})}</div>

卡片式轮播图效果实现相关推荐

uniapp卡片式轮播图——uView
1.下载安装uView uView2.0重磅发布,利剑出鞘,一统江湖 - DCloud 插件市场 2.在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vu ...
后台和小程序实现卡片式轮播图
营销活动中,轮播图效果是比较常见的,基于轮播图拓展的组件也很多,这里记录一下使用swiper实现卡片式轮播的过程,分为PC端和小程序端,其中PC端是Vue+typescript,小程序端是uni-ap ...
html卡片式轮播图带字,卡片式轮播
// import { ce } from 'migu-sdk'; export default { name: 'zt', data() { return { activityId: 'MAC_ZP ...
android 卡片轮播图,android自定义view之卡片式轮播图
前言 Android View体系是界面编程的核心,他的重要性不亚于Android四大组件.能够熟练的编写符合需求自定义VIEW是一个android程序员进阶的重要标志,在很多的企业招聘中都会在任职需 ...
uniapp卡片式轮播图
使用原生的swiper组件标签 <swiper style="height:240rpx" class="swiper-tall" :autoplay=& ...
模仿最新版爱奇艺卡片式轮播效果CardBannerDemo
本文介绍了一款模仿最新版爱奇艺卡片式轮播lib github地址:https://github.com/xuezj/CardBannerDemo CardBannerDemo 效果图 Attribut ...
php自动轮播图代码,JavaScript如何实现动态轮播图效果？（代码示例）
本篇文章给大家带来的内容是JavaScript如何实现动态轮播图效果?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 功能描述: 1.鼠标经过左右侧箭头显示,鼠标离开 ...
Android 循环滚动控件ViewFlipper，可实现跑马灯或轮播图效果
ViewFlipper--Android循环滚动控件 1.效果如下: 2.实现方法 (1)创建进出动画上下滚动动画 y_in.xml <?xml version="1.0" ...
原生JavaScript轮播图效果实现
原生JavaScript实现轮播图切换效果的实现过程本文所用代码仅供个人学习.此部分代码系按原腾讯电脑管家首页的轮播图效果,采用原生JS技术予以实现(原网页采用jQurey等技术). 1. 文件准备 ...

卡片式轮播图效果实现

基于 react 实现，vue 类似

卡片式轮播图效果实现相关推荐

最新文章

热门文章

卡片式轮播图 效果 实现

基于 react 实现，vue 类似

卡片式轮播图 效果 实现相关推荐

最新文章

热门文章

卡片式轮播图效果实现

卡片式轮播图效果实现相关推荐