原生小程序翻页效果轮播图

废话不多说，直接上代码：

    <view class=‘video-box‘>
    <view class="box" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend"
    >
    <view class="item item0 club" animation="{{animation1}}" style=‘z-index:{{zindex[0]}};opacity:{{opacities[0]}};‘>
            <image style=‘width:{{imgWidth}}‘ src=‘{{movies[0].url}}‘></image>
            <view class=‘sty_1‘>
              <view class=‘sty_2‘>{{movies[0].title}}</view>
              <view class=‘sty_3‘>{{movies[0].str_1}}</view>
              <view class=‘sty_3‘>{{movies[0].str_2}}</view>
            </view>
          </view>
          <view class=" item item1 club" animation="{{animation2}}" style=‘z-index:{{zindex[1]}};opacity:{{opacities[1]}};‘>
            <image style=‘width:{{imgWidth}}‘ src=‘{{movies[1].url}}‘></image>
            <view class=‘sty_1‘>
              <view class=‘sty_2‘>{{movies[1].title}}</view>
              <view class=‘sty_3‘>{{movies[1].str_1}}</view>
              <view class=‘sty_3‘>{{movies[1].str_2}}</view>
            </view>
          </view>
          <view class="item item2 club" animation="{{animation3}}" style=‘z-index:{{zindex[2]}};opacity:{{opacities[2]}};‘>
            <image style=‘width:{{imgWidth}}‘ src=‘{{movies[2].url}}‘></image>
            <view class=‘sty_1‘>
              <view class=‘sty_2‘>{{movies[2].title}}</view>
              <view class=‘sty_3‘>{{movies[2].str_1}}</view>
              <view class=‘sty_3‘>{{movies[2].str_2}}</view>
            </view>
          </view>
          <view class="item item3 club" animation="{{animation4}}" style=‘z-index:{{zindex[3]}};opacity:{{opacities[3]}};‘>
            <image style=‘width:{{imgWidth}}‘ src=‘{{movies[3].url}}‘></image>
            <view class=‘sty_1‘>
              <view class=‘sty_2‘>{{movies[3].title}}</view>
              <view class=‘sty_3‘>{{movies[3].str_1}}</view>
              <view class=‘sty_3‘>{{movies[3].str_2}}</view>
            </view>
          </view>
          <view class=‘btn_l‘>
            <view class=‘btnz‘ bindtap="goPre">
              <image src=‘../../images/[email protected]‘></image>
            </view>
          </view>
          <view class=‘btn_r‘>
            <view class=‘btny‘  bindtap="goNext">
              <image src=‘../../images/[email protected]‘></image>
            </view>
          </view>
    </view>

    movies:[
      {
        url:‘http:***.png‘,
        title: ‘title1‘,
        str_1: ‘string1‘,
        str_2: ‘‘
      },
      {
      url:‘http:***.png‘,
        title: ‘title2‘,
        str_1: ‘string1‘,
        str_2: ‘string2‘
      },
      {
        url:‘http:***.png‘,
        title: ‘title3‘,
        str_1: ‘string1‘,
        str_2: ‘string2‘
      },
      {
        url:‘http:***.png‘,
        title: ‘title4‘,
        str_1: ‘string1‘,
        str_2: ‘string2‘
      }
    ],
    animation1:‘‘,
    animation2:‘‘,
    animation3:‘‘,
    animation4:‘‘,
    animations: [],
    touchDot: ‘‘,
    done: false,
    time: 0,
    container: [], //记录当前5个位置为哪5个item，理解为5个容器
    curPos: 2, //记录当前显示位置是第几个容器（从0开始）
    zindex: [0, 10, 100, 10], //与container中的对应
    curIndex: 1,//从显示位置的item在clubs中的index
    postions: [0, 1, 2, 3],//container中4个容器所在位置
    opacities: [0, 0.8, 1, 0.8],

//function:
  onLoad: function (options) {
  //test----------
  this.setPos(2,1)
    //初始化到正确的位置
    var animation1 = wx.createAnimation({
      duration: 500,
      timingFunction: "ease",
      delay: 0
    })
    var animation2 = wx.createAnimation({
      duration: 500,
      timingFunction: "ease",
      delay: 0
    })
    var animation3 = wx.createAnimation({
      duration: 500,
      timingFunction: "ease",
      delay: 0
    })
    var animation4 = wx.createAnimation({
      duration: 500,
      timingFunction: "ease",
      delay: 0
    })

    this.animation1 = animation1;
    this.animation2 = animation2;
    this.animation3 = animation3;
    this.animation4 = animation4;

    this.animation1.translateX(‘0%‘).opacity(0).scale(0).step();
    this.animation2.translateX(‘-125%‘).opacity(0.4).scale(0.8).step();
    this.animation3.translateX(‘-200%‘).opacity(1).scale(1).step();
    this.animation4.translateX(‘-275%‘).opacity(0.4).scale(0.8).step();

    this.setData({
      animation1: animation1.export(),
      animation2: animation2.export(),
      animation3: animation3.export(),
      animation4: animation4.export(),
    })

  },

setPos: function (pos, index) {
    // POS CONTAINER AREA;INDEX movies INDEX
    let container = [];
    let p2 = pos;
    let p1 = this.findPrePos(p2);
    let p0 = this.findPrePos(p1);
    let p3 = this.findNextPos(p2);
    let i2 = index;
    let i1 = this.findPreIndex(i2);
    let i0 = this.findPreIndex(i1);
    let i3 = this.findNextIndex(i2);

    container[p0] = this.data.movies[i0];
    container[p1] = this.data.movies[i1];
    container[p2] = this.data.movies[i2];
    container[p3] = this.data.movies[i3];

    this.setData({
      container: container
    })
  },
  /**
   * container中的位置
   */
  findNextPos: function (pos) {
    if (pos != 3) {
      return pos + 1;
    }
    return 0;

  },
  findPrePos: function (pos) {
    if (pos != 0) {
      return pos - 1;
    }
    return 3;
  },
  findNextIndex(index) {
    if (index != this.data.movies.length - 1) {
      return index + 1;
    }
    return 0;
  },
  findPreIndex(index) {
    if (index != 0) {
      return index - 1;
    }
    return this.data.movies.length - 1;
  },
  findNewDistance(newPos, index) {
    let newDistances = [];
    switch (newPos) {
      case 0:
        newDistances = [0 - 100 * index + ‘%‘, 0, 0];
        break;
      case 1:
        newDistances = [-25 - 100 * index + ‘%‘, 0.4, 0.8];
        break;
      case 2:
        newDistances = [0 - 100 * index + ‘%‘, 1, 1];
        break;
      case 3:
        newDistances = [25 - 100 * index + ‘%‘, 0.4, 0.8];
        break;
    }
    return newDistances;
  },
  setNewZindex(newPos) {
    let zindexes = [];
    zindexes[newPos] = 100;
    let nextPos = this.findNextPos(newPos);
    zindexes[nextPos] = 10;
    let nnextPos = this.findNextPos(nextPos);
    zindexes[nnextPos] = 0;
    let prePos = this.findPrePos(newPos);
    zindexes[prePos] = 10;
    let pprePos = this.findPrePos(prePos);
    zindexes[pprePos] = 0;
    this.setData({
      zindex: zindexes
    })
  },
  goPre:function(){
    let container = this.data.container;
    let oldPos = this.data.curPos;
    let newPos = oldPos == 0 ? 3 : oldPos - 1;
    let newIndex = this.findPreIndex(this.data.curIndex);
    //先滑动，再赋值
    var animation1 = wx.createAnimation({
      duration: 500,
      timingFunction: "ease",
      delay: 0
    })
    var animation2 = wx.createAnimation({
      duration: 500,
      timingFunction: "ease",
      delay: 0
    })
    var animation3 = wx.createAnimation({
      duration: 500,
      timingFunction: "ease",
      delay: 0
    })
    var animation4 = wx.createAnimation({
      duration: 500,
      timingFunction: "ease",
      delay: 0
    })

    this.animation1 = animation1;
    this.animation2 = animation2;
    this.animation3 = animation3;
    this.animation4 = animation4;

    let distances = [];
    let newPostions = [];
    let newOpacities = [];
    //用新位置找位移量
    for (let i = 0; i < container.length; i++) {
      let newPos = this.findNextPos(this.data.postions[i]);
      let distance = this.findNewDistance(newPos, i);
      distances.push(distance);
      newPostions.push(newPos);
      newOpacities.push(distance[1]);
    }

    this.animation1.translateX(distances[0][0]).opacity(distances[0][1]).scale(distances[0][2]).step();
    this.animation2.translateX(distances[1][0]).opacity(distances[1][1]).scale(distances[1][2]).step();
    this.animation3.translateX(distances[2][0]).opacity(distances[2][1]).scale(distances[2][2]).step();
    this.animation4.translateX(distances[3][0]).opacity(distances[3][1]).scale(distances[3][2]).step();

    this.setData({
      opacities: newOpacities,
      postions: newPostions,
      animation1: animation1.export(),
      animation2: animation2.export(),
      animation3: animation3.export(),
      animation4: animation4.export(),
    })
    //赋值

    this.setPos(newPos, newIndex)
    this.setNewZindex(newPos)
    this.setData({
      curPos: newPos,
      curIndex: newIndex,
    })
  },
  goNext:function(){
    let container = this.data.container;
    let oldPos = this.data.curPos;
    let newPos = oldPos==3?0:oldPos+1;
    let newIndex = this.findNextIndex(this.data.curIndex);

    var animation1 = wx.createAnimation({
      duration: 500,
      timingFunction: "ease",
      delay: 0
    })
    var animation2 = wx.createAnimation({
      duration: 500,
      timingFunction: "ease",
      delay: 0
    })
    var animation3 = wx.createAnimation({
      duration: 500,
      timingFunction: "ease",
      delay: 0
    })
    var animation4 = wx.createAnimation({
      duration: 500,
      timingFunction: "ease",
      delay: 0
    })

    this.animation1 = animation1;
    this.animation2 = animation2;
    this.animation3 = animation3;
    this.animation4 = animation4;

    let distances = [];
    let newPostions = [];
    let newOpacities = [];
    //用新位置找位移量
    for (let i = 0; i < container.length; i++) {
      let newPos = this.findPrePos(this.data.postions[i]);
      let distance = this.findNewDistance(newPos, i);
      distances.push(distance);
      newPostions.push(newPos);
      newOpacities.push(distance[1]);
    }
    this.animation1.translateX(distances[0][0]).opacity(distances[0][1]).scale(distances[0][2]).step();
    this.animation2.translateX(distances[1][0]).opacity(distances[1][1]).scale(distances[1][2]).step();
    this.animation3.translateX(distances[2][0]).opacity(distances[2][1]).scale(distances[2][2]).step();
    this.animation4.translateX(distances[3][0]).opacity(distances[3][1]).scale(distances[3][2]).step();

    this.setData({
      opacities: newOpacities,
      postions: newPostions,
      animation1: animation1.export(),
      animation2: animation2.export(),
      animation3: animation3.export(),
      animation4: animation4.export(),
    })
    //赋值

    this.setPos(newPos, newIndex)
    this.setNewZindex(newPos)
    this.setData({
      curPos: newPos,
      curIndex: newIndex,
    })

  },
  //触摸开始事件
  touchstart: function (e) {
    this.data.touchDot = e.touches[0].pageX;
    var that = this;
    this.data.interval = setInterval(function () {
      that.data.time += 1;
    }, 100);
  },
  //触摸移动事件
  touchmove: function (e) {
    let touchMove = e.touches[0].pageX;
    let touchDot = this.data.touchDot;
    let time = this.data.time;

    //向左滑动
    if (touchMove - touchDot <= -40 && time < 10 && !this.data.done) {
      this.data.done = true;
      this.goNext();
    }
    //向右滑动
    if (touchMove - touchDot >= 40 && time < 10 && !this.data.done) {
      this.data.done = true;
      this.goPre();
    }
  },
  //触摸结束事件
  touchend: function (e) {
    clearInterval(this.data.interval);
    this.data.time = 0;
    this.data.done = false;
  },

　　

　　

原文地址：https://www.cnblogs.com/zfyan-1992/p/10335791.html

时间： 2024-10-10 20:31:54

原生小程序翻页效果轮播图的相关文章

【微信小程序】：实现轮播图3秒滚动

wxml模板:(数据一维数组) <scroll-view scroll-y="true"> <swiper autoplay="auto" interval="3000" duration="500"> <block wx:for="{{home_pics}}" wx:for-index="index"> <swiper-item> <

【前端】javascript+jQuery实现旋转木马效果轮播图slider

实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为两侧控制按钮绑定事件(调用同一个方法,只有一个参数,true为正向旋转,false为反向旋转) 实现代码: <!DOCTYPE html> <html> <head> <title>旋转木马效果轮播图</title> <meta charset

原生js实现的3个小特效（时钟、轮播图、选项卡）

时钟: <p id="timeTxt"></p>  //将获取到的时间显示在timeTxt这里面        <button onclick="startTime()">关闭</button>        <!--时钟-->        function startTime(){  //创建startTime()函数            var today=new Date();  //定义一个对象

CSS3,3D效果轮播图

---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋转属性来完成3D效果的,然后配合原生js的显示隐藏,达到了3D旋转轮播图的效果: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/ht

简单说说tab标签页和轮播图

准确的来说,一个页面能够独立的做出轮播图才算是刚步入前端世界.说轮播图之前先来说说标签页,.因为它比较简单,我的效果使用jquery来实现的,. 具体代码只有一点点,. var timeout; $(document).ready(function(){ $("#tabfirst li").each(function(index){ var liNode=$(this); liNode.click(function(){ timeout=setTimeout(function(){ $

原生js实现移动端Touch轮播图的方法步骤

Touch 轮播图 touch轮播图其实就是通过手指的滑动,来左右切换轮播图,下面我们通过一个案例,来实现下. 1. html 结构 结构上,还是用ul.li来存放轮播图片,ol.li来存放轮播小圆点: 2. 样式初始化 html的一些标签,都会有一些默认样式,比如body标签默认是有一个边距的,为了不影响美观,我们需要清除掉. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 /* 清除标签默认边距 */ body,ul,li,ol,im

jQuery淡入淡出效果轮播图

用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: <div id="container"> <ul class="pic"> <li><a href="javascript:;"><img src="DSC01627.jpg"

轮播图---左右切换无长滚动效果轮播图-中级难度版

左右切换无长滚动轮播图思路:首先设有全局变量position(确定当前图片是第几张),arr数组:存放图片地址,方向:direction, 及lis小圆点数组,prev,记录小圆点的前一个, moveBool是否进入运动函数等1.点击事件:点击左边的leftBn,设置direction="right",position--,在这要确定position不能超出数组长度范围, 超出要重新赋值,点击小圆点把小圆点的当前是lis数组中的第几个赋值给position,然后图片生成2.图片生成:图

js小效果-轮播图

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style: none; } #wrap{ width:500px; height:260px; margin:50px auto; position:r