html卡片式轮播图带字,卡片式轮播

最新推荐文章于 2024-06-06 07:15:00 发布

小六不是六

最新推荐文章于 2024-06-06 07:15:00 发布

阅读量1.3k

点赞数

文章标签： html卡片式轮播图带字

这个博客展示了如何实现一个HTML卡片式的轮播图，包括图片和文字信息。通过使用CSS定位和过渡效果，创建了滑动动画。博客中包含多个卡片样本，如巴耶克、马拉卡和艾吉奥等，并提供了滑动上一个和下一个的功能，同时支持移动端滑动操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// import { ce } from 'migu-sdk';

export default {

data() {

return {

activityId: 'MAC_ZP_KF_MGHZJRQJXPX2019',

stage: '', // 当前活动状态

voteInfo: '', //当前所有票数列表

loading: true,

initCenterIndez: 3, // 初始化中间的index(img数组中)

currentIndex: 3, //当前中间imgs数组中index

centerInfo: '', // 当前中间信息

startX: '',

endX: '',

imgs: [

{

imgSrc:

'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578753283849&di=926ab993242f5124613b7cb61134ff75&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F82c9e6899e7f33bf867f207e871d61e24f473834.jpg',

index: 0

{

imgSrc:

'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579348146&di=5548595a45061454b4b5491f65a74a0a&imgtype=jpg&er=1&src=http%3A%2F%2Fimg23.aspzz.cn%2Fuploads%2Fallimg%2Fc190116%2F154KD32553610-1044U.jpg',

index: 1

{

imgSrc:

'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579348251&di=7ca30312f94789c03154db45b176b599&imgtype=jpg&er=1&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fff1a45aeb6126ba1d0bd6c9e75d192ec83b9fb1a.jpg',

index: 2

{

imgSrc:

'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1259084891,2660179829&fm=26&gp=0.jpg',

index: 3

{

imgSrc:

'https://tim