js原生实现移动端手指滑动轮播图效果的示例
如下所示：
<!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>
<div class="wrap">
<ul class="box">
<li><div class="box1 box2">11111</div></li>
<li><div class="box1 box3">2222</div></li>
<li><div class="box1 box4">3333</div></li>
<li><div class="box1 box5">4444</div></li>
</ul>
</div>
<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 + '%';
};
// 初始化手指坐标点
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 + 'px';
});
//当手指抬起的时候，判断图片滚动离左右的距离，当
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 + 'px';
})
</script>
</body>
</html>
以上这篇js原生实现移动端手指滑动轮播图效果的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
原生js实现移动端触摸轮播的示例代码
PC端上实现图片轮播效果很简单,只要通过使用click事件就可以非常简单的实现效果,但是在移动端上,就要通过核心的touch事件来实现. 下面是移动端手指滑动轮播图的完整代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scala
-
JavaScript实现移动端轮播效果
这个轮播代码不是我自己所写,是偶然游览一个简友的主页看到的,今天刚看了事件,决定来逐行分析一下这个代码.首先,移动端与电脑端不同的是移动端只能通过触摸和手势来发生行为,所以我们要用到js中的与触摸操作有关的新事件.其实我们轮播的原理和以前相同,都是通过改变元素的位置来控制图片的出现,但让我们不是很上手的,是那些用于跟踪触摸的属性. 下面,我简单介绍一下与触摸相关的知识 触摸事件 touchstart:当手指触摸屏幕时触发,一只手指放在屏幕上也会触发 touchmove:当手指在屏幕上滑动时连续触
-
支持移动端原生js轮播图
直接上代码,自行复制粘贴,本人是新手,欢迎指正. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>轮播图</title> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-sca
-
js实现移动端轮播图效果
本文实例为大家分享了移动端轮播图效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max
-
原生js图片轮播效果实现代码
现在很多javascript的插件都可以实现图片轮播的功能,这篇文章,主要是通过这个domo来解析javascript图片轮播的原理. 老规矩,先上代码.至于代码中的图片,随便找三张即可,最核心的还是理解其思想. html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>滚动图</title> <link rel="sty
-
js原生实现移动端手指滑动轮播图效果的示例
如下所示: <!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
-
JS中Swiper的使用和轮播图效果
Swiper是移动端的一款非常强大的触摸滑动插件,下面代码只展示一些常用的配置,具体可以查看官网api <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="swiper.min.cs
-
JS实现头条新闻的经典轮播图效果示例
本文实例讲述了JS实现头条新闻的经典轮播图效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m
-
js实现从左向右滑动式轮播图效果
轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实现第一种效果的方法. 原理 相同大小的图片并成一列,但只显示其中一张图片,其余的隐藏,通过修改left值来改变显示的图片. 点击查看效果 html部分 nav为总容器,第一个ul列表#index为小圆点列表,鼠标覆盖哪个小圆点就显现第几张图片,on是一个给小圆点添加背景颜色属性的类:第二个ul列表#
-
js实现固定宽高滑动轮播图效果
话不多说,请看具体示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <st
-
JS仿京东移动端手指拨动切换轮播图效果
如今,移动端web页面在市场上也是占有相当大的比例,而移动端的轮播图效果也是很常见的,今天我就来记录下关于实现一组适用于移动端的可用手指进行拨动切换轮播图的效果. 这个效果的主要技术点依托于触屏设备特有的touch事件:好了,接下来就进入主题吧. 首先是html布局: 1. 这里强调的是记得给html加上viewport这个适口属性. 2. 由于在拨动第一张图片以及最后一张图片的时候需要切换到最后一张以及第一张,要想达到理想效果,需要给第一张图片前面加上最后一张图片,而在最后一张图片后加上第一张
-
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
本文实例讲述了原生JavaScript实现的淘宝轮播图效果.分享给大家供大家参考,具体如下: 轮播图是我们学习原生js的必经之路 它包含很多基本知识的运用,像this的使用,DOM的操作,还有setInterval的使用和清除,浮动与定位等等,很好的考察了我们的基础知识牢不牢固, 话不多说,直接上图 HTML代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF
-
原生js实现移动端Touch轮播图的方法步骤
Touch 轮播图 touch轮播图其实就是通过手指的滑动,来左右切换轮播图,下面我们通过一个案例,来实现下. 1. html 结构 结构上,还是用ul.li来存放轮播图片,ol.li来存放轮播小圆点: 2. 样式初始化 html的一些标签,都会有一些默认样式,比如body标签默认是有一个边距的,为了不影响美观,我们需要清除掉. /* 清除标签默认边距 */ body,ul,li,ol,img { margin: 0; padding: 0; } /* 清除 ul 等标签前面的"小圆点"
-
vue.js项目使用原生js实现移动端的轮播图
目录 前言 一.了解原生js移动端的事件 二.轮播图实战 第一部分:template模板 第一部分解读: 第二部分:script标签内代码 第二部分解读: 第三部分:css样式部分 三.效果图 结束语 前言 今天我在vue.js项目实战开发过程中遇到了实现轮播图效果的问题,因为不想因为一个轮播图而引用整个jquery,而且我还发现自己根本就不清楚移动端的一些事件,所以我就进行了一些资料查找,并最终解决了这个问题,接下来跟大家分享一下我的解决问题的过程. 一.了解原生js移动端的事件 原生js移动
-
原生JS实现移动端web轮播图详解（结合Tween算法造轮子）
前言 相信大家应该都知道,移动端的轮播图是我们比较常见的需求, 我们最快的实现方式往往是 使用第三方的代码, 例如 swiper , 但当遇到一些比较复杂的轮播图需求时, 往往是束手无策,不知道怎么改. 所以我们要尝试去自己造一些轮子, 以适应各种复杂多变的需求; 另外一点, 自己写的代码如果有bug是很容易修复的, 对自身的提高也很大. 在没有阅读swiper源码的过程下,我尝试自己实现一个简易而不失实用的移动端轮播图, 经过几个小时的思考和实践终于还是实现了(如图): 实现移动端的轮播图要