首页 > web前端 > js教程 > js实现移动端手指滑动轮播图效果

js实现移动端手指滑动轮播图效果

小云云
发布: 2018-01-03 09:24:11
原创
3207 人浏览过

本文主要为大家分享一篇js原生实现移动端手指滑动轮播图效果的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧,希望能帮助到大家。

如下所示:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

  <title>Document</title>

</head>

<style>

  html{height:100%;}

  body{width: 100%;height:100%;margin:0;overflow: hidden;}

  .wrap{position: relative;overflow: hidden;}

  .box{position: absolute;list-style: none;left:0;top:0;padding:0;margin:0;}

  .box li{float:left;}

  .box{

    position: relative;

    height: 2000px;

    width: 100%;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    background: red;

  }

  .box1{

    height: 2000px;

  }

  .box2{

    background: yellow;

  }

  .box3{

    background: yellowgreen;

  }

  .box4{

    background: orange;

  }

  .box5{

    background: cyan;

  }

</style>

<body>

<p class="wrap">

  <ul class="box">

    <li><p class="box1 box2">11111</p></li>

    <li><p class="box1 box3">2222</p></li>

    <li><p class="box1 box4">3333</p></li>

    <li><p class="box1 box5">4444</p></li>

  </ul>

</p>

<script>

  var aLi = document.querySelectorAll(".box li");

  var box = document.querySelector('.box');

  var wrap = document.querySelector('.wrap');

  var aLiWidth = box.offsetWidth;

  console.log('aLiWidth: ' + aLiWidth)

  wrap.style.height = aLi[0].offsetHeight + 'px';

  // 设置盒子的宽度

  box.style.width = aLi.length*100 + '%';

  for(var i=0;i<aLi.length;i++){

    aLi[i].style.width = 1/aLi.length * 100 + &#39;%&#39;;

  };

  // 初始化手指坐标点

  var startPoint = 0;

  var startEle = 0;

  //手指按下

  wrap.addEventListener("touchstart",function(e){

    startPoint = e.changedTouches[0].pageX;

    startEle = box.offsetLeft;

  });

  //手指滑动

  wrap.addEventListener("touchmove",function(e){

    var currPoint = e.changedTouches[0].pageX;

    var disX = currPoint - startPoint;

    var left = startEle + disX;

    box.style.left = left + &#39;px&#39;;

  });

  //当手指抬起的时候,判断图片滚动离左右的距离,当

  wrap.addEventListener("touchend",function(e){

    var left = box.offsetLeft;

// 判断正在滚动的图片距离左右图片的远近,以及是否为最后一张或者第一张

    var currNum = Math.round(-left/aLiWidth);

    currNum = currNum>=(aLi.length-1) ? aLi.length-1 : currNum;

    currNum = currNum<=0 ? 0 : currNum;

    box.style.left = -currNum*wrap.offsetWidth + &#39;px&#39;;

  })

 

</script>

 

</body>

</html>

登录后复制

相关推荐:

jquery版轮播图效果和extend扩展实例分享

关于JQuery和html+css实现带小圆点和左右按钮的轮播图分享

实例详解jquery实现左右轮播图效果

以上是js实现移动端手指滑动轮播图效果的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
JavaScript钩子函数是什么?
来自于 1970-01-01 08:00:00
0
0
0
怎么实现 JavaScript点与圆的位置关系
来自于 1970-01-01 08:00:00
0
0
0
c++ 调用javascript
来自于 1970-01-01 08:00:00
0
0
0
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板