小程序--图片滚动

循环图片

<view style="position: relative;overflow: hidden;width: 100%;">
        <view class="box1" bindtouchend="swiperTouchend"  bindtouchstart="swiperTouchstart">
            <image src="{{item.image}}" wx:for="{{array}}" wx:key class="{{arr[index]}}">
                <view class="centerxbox" bindtap="clickcenter" id="{{item.id}}">
                    <view>
                        <span>{{item.companyname}}</span>
                    </view>
                    <view>{{item.position}}：{{item.name}}</view>
                    <view>地址：{{item.address}}</view>
                </view>
                <span class="{{item.focus}}" bindtap="follow" id="{{item.id}}" data-type="1">{{item.focus == 'yfocus' ? '已关注' : '未关注'}}</span>
                <view class="cenbox" bindtap="clickcenter" id="{{item.id}}"></view>
            </image>
        </view>
    </view>

位置通过css确定

.p1 {
    transform: translate3d(-320%, 0, 0);
    width: 467rpx;
    height: 566rpx;
    z-index: 1;
    margin-top: 50rpx;
    transition: all 5s;
}

.p2 {
    transform: translate3d(-240%, 0, 0);
    width: 467rpx;
    height: 566rpx;
    z-index: 1;
    margin-top: 50rpx;
    transition: 5s;
}

.p3 {
    transform: translate3d(-160%, 0, 0);
    width: 467rpx;
    height: 566rpx;
    z-index: 1;
    margin-top: 50rpx;
    transition:5s;
}

.p4 {
    transform: translate3d(-80%, 0, 0);
   width: 467rpx;
    height: 566rpx;
    z-index: 1;
    margin-top: 50rpx;
    transition: 5s;
}

.p5 {
    transform: translate3d(0, 0, 0);
    width: 567rpx;
    height: 666rpx;
    z-index: 10;
    margin-top: 0rpx;
}

.p6 {
    transform: translate3d(80%, 0, 0);
    width: 467rpx;
    height: 566rpx;
    z-index: 1;
    margin-top: 50rpx;
}

.p7 {
    transform: translate3d(160%, 0, 0);
    width: 467rpx;
    height: 566rpx;
    z-index: 1;
    margin-top: 50rpx;
}

.p8 {
    transform: translate3d(240%, 0, 0);
    width: 467rpx;
    height: 566rpx;
    z-index: 1;
    margin-top: 50rpx;
}

.p9 {
    transform: translate3d(320%, 0, 0);
    width: 467rpx;
    height: 566rpx;
    z-index: 1;
    margin-top: 50rpx;
}

将类名放入一个数组中，根据循环索引确定对应的数组，通过js改变数组的排列

// 上一张
    prevImg: function () {
        var that = this;
        var cArr = that.data.arr;
        cArr.unshift(cArr[8]);
        cArr.pop();
        console.log(cArr);
        that.setData({
            arr: cArr
        })
    },

    // 下一张
    nextImg: function () {
        var that = this;
        var cArr = that.data.arr;
        cArr.push(cArr[0]);
        cArr.shift();
        console.log(cArr);
        that.setData({
            arr: cArr
        })
    },

向左滑动时，上一张；向右滑动时，下一张