CSS3怎样做图片横向无限滚动的效果实现重点是什么

发布时间：2023-10-23 14:40:43 所属栏目：语言来源：

导读：　　本文示例都是用小程序写的，但是不影响要实现的功能。

　　wxml

　　装图片的盒子多复制一份，让循环图片的首尾相接

　　<view class="scrollbox dis-flex">

　　 <view class="imgItem dis-

　　本文示例都是用小程序写的，但是不影响要实现的功能。

　　wxml

　　装图片的盒子多复制一份，让循环图片的首尾相接

　　<view class="scrollbox dis-flex">

　　    <view class="imgItem dis-flex" style="animation: {{computedAni}};">

　　      <image src="../img/{{index + 1}}.jpg" wx:for="{{images}}" mode="aspectFill" wx:key="index"></image>

　　    </view>

　　    <view class="imgItem dis-flex" style="animation: {{computedAni}};">

　　      <image src="../img/{{index + 1}}.jpg" wx:for="{{images}}" mode="aspectFill" wx:key="index"></image>

　　    </view>

　　</view>

　　wxss

　　.dis-flex {

　　 display: flex;

　　 display: -webkit-flex;

　　}

　　.scrollbox {

　　 margin: 30px;

　　 text-align: center;

　　 border: 1px solid blue;

　　 height: 220rpx;

　　 align-items: center;

　　 overflow: hidden;

　　}

　　.imgItem {

　　 animation: 24s rowup linear infinite normal;

　　}

　　.imgItem image {

　　 width: 200rpx;

　　 height: 200rpx;

　　 margin: 0 20rpx;

　　}

　　@keyframes rowup {

　　 0% {

　　      -webkit-transform: translate3d(0, 0, 0);

　　      transform: translate3d(0, 0, 0);

　　 }

　　 100% {

　　      -webkit-transform: translate3d(-100%, 0, 0);

　　      transform: translate3d(-100%, 0, 0);

　　 }

　　}

　　@-webkit-keyframes rowup {

　　 0% {

　　      -webkit-transform: translate3d(0, 0, 0);

　　      transform: translate3d(0, 0, 0);

　　 }

　　 100% {

　　    -webkit-transform: translate3d(-1000px, 0, 0);

　　    transform: translate3d(-1000px, 0, 0);

　　 }

　　}

　　js

　　调整速度的关键就在，动画的时间是由循环的项目个数动态控制的

　　Page({

　　 data: {

　　    images: new Array(4),

　　    computedAni: ''

　　 },

　　 onLoad: function () {

　　    this.setAniSpeed(this.data.images.length)

　　 },

　　 setAniSpeed (num) {

　　    let time = Math.ceil(num / 5 * 15) // 这里是以5张图片的时候，动画时间15s为基准,可以自己调节

　　    this.setData({

　　      computedAni: `${time}s rowup linear infinite normal`

　　    })

　　 }

　　})

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!