首页 > web前端 > js教程 > 在js中如何实现移动端触摸轮播

在js中如何实现移动端触摸轮播

亚连
发布: 2018-06-19 10:25:06
原创
1362 人浏览过

下面我就为大家分享一篇原生js实现移动端触摸轮播的示例代码,具有很好的参考价值,希望对大家有所帮助。

PC端上实现图片轮播效果很简单,只要通过使用click事件就可以非常简单的实现效果,但是在移动端上,就要通过核心的touch事件来实现。

下面是移动端手指滑动轮播图的完整代码。

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

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

<!DOCTYPE html>

<html>

<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">

<style>

*{margin:0;padding:0;}

li{list-style:none;}

.lb{width:320px;height:130px;position:relative;margin:20px auto;overflow: hidden;}

.lb .lb_img{width:2240px;height:130px;position:absolute;left:-320px;}

.lb .lb_img img{width:320px;height:130px;float:left;display:block;}

.lb ul{width:35px;height:4px;position:absolute;bottom:10px;left:50%;margin-left:-15px;}

.lb ul li{width:4px;height:4px;border-radius:2px;border:0.25px solid #fff;margin-left:2.5px;background:#666;float:left;cursor:pointer;}

.lb ul .active{background:#fff;}

.lb ul li:hover{background:#fff;}

</style>

</head>

<body>

<p class="lb">

        <p class="lb_img">

            <img src="img/4.jpg">

            <img src="img/0.jpg">

            <img src="img/1.jpg">

            <img src="img/2.jpg">

            <img src="img/3.jpg">

            <img src="img/4.jpg">

            <img src="img/0.jpg">

        </p>

        <ul>

            <li class="active"></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

</p> 

<script>

var lb = document.querySelector(".lb");

var lb_img = document.querySelector(".lb .lb_img");

var img = document.querySelectorAll(".lb .lb_img img")

var lis = document.querySelectorAll(".lb ul li");

var i=2;

 // 初始化手指坐标点

 var startPoint = 0;

 var startEle = 0;

 //手指按下

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

 startPoint = e.changedTouches[0].pageX;

 startEle = lb_img.offsetLeft;

 clearInterval(Time)

 });

  

 //手指滑动

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

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

 var disX = currPoint - startPoint;

 var left = startEle + disX;

 lb_img.style.left = left + "px";

 });

 //当手指抬起的时候,

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

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

    var disX = - (currPoint - startPoint);

 var left = startEle + disX;

 if(disX > 150){

        i++;

        for(var q=0;q<lis.length;q++){

      lis[q].className = &#39;&#39;;

     }

     if(i == 7){

        i=2;

     }

     lis[i-2].className= "active" ;    

    lb_img.style.left = -320*(Math.round(disX/320)+i+1)+ &#39;px&#39;;     

 }else{

    lb_img.style.left = -320*(i-1) + "px";

 }

 if(disX < -150){

    i--;

    for(var q=0;q<lis.length;q++){

  lis[q].className = &#39;&#39;;

  }

  if(i == 1){

        i=6;

    }

    lis[i-2].className= "active" ;     

    lb_img.style.left = -320*(Math.round(-disX/320)+i-2) + &#39;px&#39;;

         

 }else{

    lb_img.style.left = -320*(i-1) + "px";

 }

 Time=setInterval(autoplay,2000);

 })

//设置定时器

Time=setInterval(autoplay,2000);

 function autoplay(){

 i++;

 for(var q=0;q<lis.length;q++){

 lis[q].className = &#39;&#39;;

 }

 if(i == 7){

 i=2;

 }

 lis[i-2].className= "active" ;

 for(var a=0; a<320;a++){

  setTimeout(function(){

   var left = lb_img.style.left ? lb_img.style.left : "-320px";

   left = parseInt(left)-1;

   if(left<-1920){

   left=-321;

   }

   lb_img.style.left = left + "px";

  },a);

 }

 }

</script>

</body>

</html>

登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在Angular中如何实现查询天气预报

在Angular中如何实现显示输入内容

在Angular中如何实现日程表功能

在nodejs+express中如何实现文件上传

在Vue+SpringBoot中如何实现博客管理平台

在nodejs中如何解决超出最大的调用栈错误

在Vue中有关于异步组件的示例

以上是在js中如何实现移动端触摸轮播的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板