原生js实现简单移动端轮播图
最近项目不是很忙，自己就用原生js写了一个简单的移动端轮播图的小demo，可实现自动轮播和手势滑动轮播，然后就把它记录到个人博客里。还有很多不足的地方，希望多多指出，以便改进。
需要购买阿里云产品和服务的，点击此链接领取优惠券红包，优惠购买哦，领取后一个月内有效： https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07
1、代码部分
分为四个文件：
slideshow.html
slideshow.css
base.js
slideshow.js
1.1、slideshow.html
<!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>移动端-轮播图</title>
<link rel="stylesheet" href="slideshow.css">
</head>
<body>
<div class="layout">
<div class="banner">
<ul class="clearfix">
<li><a href="#"><img src="data:images/l5.jpg"></a></li>
<li><a href="#"><img src="data:images/l1.jpg"></a></li>
<li><a href="#"><img src="data:images/l2.jpg"></a></li>
<li><a href="#"><img src="data:images/l3.jpg"></a></li>
<li><a href="#"><img src="data:images/l4.jpg"></a></li>
<li><a href="#"><img src="data:images/l5.jpg"></a></li>
<li><a href="#"><img src="data:images/l1.jpg"></a></li>
</ul>
<ul>
<li class="now"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div> <script src="base.js"></script>
<script src="slideshow.js"></script>
</body>
</html>
1.2、slideshow.css
*,
::before,
::after{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;/*兼容移动端主流浏览器*/
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;/*清除移动端点击高亮效果*/
}
body{
font-family:Microsoft YaHei,sans-serif;/*移动端默认的字体*/
font-size: 14px;
color: #333;
}
ol,ul{
list-style: none;
}
/*清除浮动*/
.clearfix::before,
.clearfix::after{
content: "";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
} .layout{
width: 100%;
max-width: 750px;
min-width: 320px;
margin: 0 auto;
position: relative;
}
.banner{
width: 100%;
overflow: hidden;
position: relative;
}
.banner ul:first-child{
width: 1000%;
-webkit-transform: translateX(-10%);
transform: translateX(-10%);
}
.banner ul:first-child li{
width: 10%;
float: left;
}
.banner ul:first-child li a{
display: block;
width: 100%;
}
.banner ul:first-child li a img{
width: 100%;
display: block;
}
.banner ul:last-child{
position: absolute;
bottom: 6px;
width: 100%;
text-align: center;
}
.banner ul:last-child li{
width: 6px;
height: 6px;
border: 1px solid #fff;
border-radius: 50%;
display: inline-block;
margin-left: 10px;
}
.banner ul:last-child li:first-child{
margin-left: 0;
}
.banner ul:last-child li.now{
background: #fff;
}
1.3、base.js
/**
* Created by libo on 2017/11/9.
*/ /*封装一些公用的事件或者公用的方法*/
/*定义的一个命名空间*/
window.my = {};
/*封装一个事件 过渡结束事件*/
my.transitionEnd = function(dom,callback){
//1.给谁加事件
//2.事件触发后处理什么业务
if(!dom || typeof dom != 'object'){
//没dom的时候或者不是一个对象的时候 程序停止
return false;
}
dom.addEventListener('transitionEnd', function(){
callback && callback();
});
dom.addEventListener('webkitTransitionEnd', function(){
callback && callback();
});
} //封装一个tap事件
my.tap = function(dom,callback){
if(!dom || typeof dom != 'object'){
//没dom的时候或者不是一个对象的时候 程序停止
return false;
} var isMove = false; //是否滑动过
var time = 0; //刚刚触摸屏幕的事件 touchstart的触发事件 dom.addEventListener('touchstart',function(){
//记录触发这个事件的时间
time = Date.now(); //时间戳 毫秒
});
dom.addEventListener('touchmove',function(){
isMove = true;
});
window.addEventListener('touchend',function(e){
//1.没有滑动过
//2.响应事件在150ms以内 要求比click要响应快
if(!isMove && (Date.now()-time)<150 ){
callback && callback(e);
} //重置参数
isMove = false;
time = 0;
}); }
1.4、slideshow.js
/**
* Created by libo on 2017/11/9.
*/
window.onload = function(){
/*
* 1.自动轮播 定时器 无缝衔接 动画结束瞬间定位
* 2.点需要随着轮播的滚动改变对应的点 改变当前样式 当前图片的索引
* 3.手指滑动的时候让轮播图滑动 touch事件 记录坐标轴的改变 改变轮播图的定位（位移css3）
* 4.当滑动的距离不超过一定的距离的时候 需要吸附回去 过渡的形式去做
* 5.当滑动超过了一定的距离 需要 跳到 下一张或者上一张 （滑动的方向） 一定的距离（屏幕的三分之一）
* */ var imageCount = 5; //页面中用来轮播的图片有5张不同的
//轮播图大盒子
var banner = document.querySelector('.banner');
//图片的宽度
var width = banner.offsetWidth;
//图片盒子
var imageBox = banner.querySelector('ul:first-child');
//点盒子
var pointBox = banner.querySelector('ul:last-child');
//所有的点
var points = pointBox.querySelectorAll('li'); //公用方法
//加过渡
var addTransition = function(){
imageBox.style.transition = "all 0.3s";
imageBox.style.webkitTransition = "all 0.3s";/*做兼容*/
};
//清除过渡
var removeTransition = function(){
imageBox.style.transition = "none";
imageBox.style.webkitTransition = "none";
}
//定位
var setTranslateX = function(translateX){
imageBox.style.transform = "translateX("+translateX+"px)";
imageBox.style.webkitTransform = "translateX("+translateX+"px)";
} //功能实现
//自动轮播 定时器 无缝衔接 动画结束瞬间定位
var index = 1;
var timer = setInterval(function(){
index++ ; //自动轮播到下一张
//改变定位 动画的形式去改变 transition transform translate
addTransition(); //加过渡动画
setTranslateX(-index * width); //定位
},3000); //等过渡结束之后来做无缝衔接
my.transitionEnd(imageBox, function(){
//处理事件结束后的业务逻辑
if(index > imageCount ){
index = 1;
}else if(index <= 0){
index = imageCount;
}
removeTransition(); //清除过渡
setTranslateX(-index * width); //定位
setPoint(); //设置底部显示当前图片对应的圆角
}); //改变当前样式 当前图片的索引
var setPoint = function(){
//清除上一次的now
for(var i = 0 ; i < points.length ; i++){
points[i].className = " ";
}
//给图片对应的点加上样式
points[index-1].className = "now";
} /*
手指滑动的时候让轮播图滑动 touch事件 记录坐标轴的改变 改变轮播图的定位（位移css3）
当滑动的距离不超过一定的距离的时候 需要吸附回去 过渡的形式去做
当滑动超过了一定的距离 需要 跳到 下一张或者上一张 （滑动的方向） 一定的距离（屏幕的三分之一）
*/
//touch事件
var startX = 0; //记录起始 刚刚触摸的点的位置 x的坐标
var moveX = 0; //滑动的时候x的位置
var distanceX = 0; //滑动的距离
var isMove = false; //是否滑动过 imageBox.addEventListener('touchstart', function(e){
clearInterval(timer); //清除定时器
startX = e.touches[0].clientX; //记录起始X
}); imageBox.addEventListener('touchmove',function(e){
moveX = e.touches[0].clientX; //滑动时候的X
distanceX = moveX - startX; //计算移动的距离
//计算当前定位 -index*width+distanceX
removeTransition(); //清除过渡
setTranslateX(-index * width + distanceX); //实时的定位
isMove = true; //证明滑动过
}); //在模拟器上模拟的滑动会有问题 丢失的情况 最后在模拟器的时候用window
imageBox.addEventListener('touchend', function(e){
// 滑动超过 1/3 即为滑动有效，否则即为无效，则吸附回去
if(isMove && Math.abs(distanceX) > width/3){
//5.当滑动超过了一定的距离 需要 跳到 下一张或者上一张 （滑动的方向）*/
if(distanceX > 0){ //上一张
index --;
}
else{ //下一张
index ++;
}
}
addTransition(); //加过渡动画
setTranslateX(-index * width); //定位 if(index > imageCount ){
index = 1;
}else if(index <= 0){
index = imageCount;
}
setPoint(); //重置参数
startX = 0;
moveX = 0;
distanceX = 0;
isMove = false;
//加定时器
clearInterval(timer); //严谨 再清除一次定时器
timer= setInterval(function(){
index++ ; //自动轮播到下一张
addTransition(); //加过渡动画
setTranslateX(-index * width); //定位
},3000);
});
};
2、效果
原生js实现简单移动端轮播图的更多相关文章
- 原生js一行代码实现简易轮播图
这是一个简易的js无限循环轮播图,只用了一行js代码就实现了无限循环,记录一下三目运算符的伟大! <!DOCTYPE html><html lang="en"&g ...
- js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
- 前端（十七）—— jQuery基础：jQuery的基本使用、JQ功能概括、JS对象与JQ对象转换、Ajax简单应用、轮播图
jQuery的基本使用.JQ功能概括.JS对象与JQ对象转换.Ajax简单应用.轮播图 一.认识jQuery 1.什么是jQuery jQuery是对原生JavaScript二次封装的工具函数集合 j ...
- JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...
- 一步一步拆解一个简单的iOS轮播图（三图）
导言(可以不看): 不吹不黑,也许是东半球最简单的iOS轮播图拆分注释(讲解不敢当)了(tree new bee).(一句话包含两个人,你能猜到有谁吗?提示:一个在卖手机,一个最近在卖书)哈哈... ...
- 告别组件之教你使用原生js和css写移动端轮播图
在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. ...
- 原生JS实现移动端轮播图
功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个inde ...
- 移动端轮播图实现方法（dGun.js）
本文章介绍在移动端无缝隙轮播图实现的原理,这个轮子比较简单,但可以方便刚刚入门的同学参考.最终效果是在移动端无缝隙无限滑动,可以自定义轮播的速度.支持手势左右滑动.最后会放上源码. HTML部分 &l ...
- 简单介绍无限轮播图，js源代码
无限轮播图js源代码,今天介绍一下用js简单的编写无限轮播图 <!DOCTYPE html> <html> <head> <meta charse ...
随机推荐
- oracle 行转列 列转行
行转列 这是一个Oracle的列转行函数:LISTAGG() 先看示例代码: with temp as( select 'China' nation ,'Guangzhou' city from du ...
- Ionic3学习笔记（二）主题化
本文为原创文章,转载请标明出处 目录 CSS实用属性 文本相关 位置相关 padding & margin 自定义颜色 平台样式 覆写Ionic Sass变量 RTL支持 1. CSS实用属性 ...
- 手动添加 Git bash 到鼠标右键
由于不知原因,右键没有了Git Bash Here,没有这个右键菜单导致获取Git仓库中的代码很不方便,所以决定通过注册表的方式将这个菜单加出来. 1.win + R,输入"regedit& ...
- Elixir游戏服设计五
在<Elixir游戏服设计一>里提到,按照系统功能划分成app要保证原子性很难, 现在想想也没那么难.保证原子性,无非就是需要某个单点去完成操作.那么选择玩家进程去做原子性工作就可以了. ...
- [Unity]Unity3D编辑器插件扩展和组件扩展
1. 插件扩展 1.1. 命名空间 using UnityEditor; using UnityEngine; //非必需,常用到 1.2. 使用语法 [MenuItem("Assets/M ...
- java web 学习总结之 Servlet/JSP 编码问题
Servlet和JSP编码问题 字节流: 1.得到OutputStream 字节流 OutputStream os = response.getOutputStream(); 用默认编码输出数据 ...
- Java面向对象 Main函数 静态的应用 单例设计模式
Java面向对象 Main函数 静态的应用与单例设计模式 知识概要 (1)Main函数的细解 (2)静态的应用,静态变量,静态代码块,静态函数 (3)单例设计模式 1.M ...
- ionic构建APP--简单操作实现APP制作
ionic--基于AngularJS的app框架 1安装ionic .HBuilder创建APP项目,导入ionic的css,js(fonts)文件. .导入ionic.css和ionic.bundl ...
- PHP开发要点与技巧总结(一)
Opcache:Opcache 来源于Zend Optimizer+改名,主要作用是通过将 PHP 脚本预编译的字节码存储到共享内存中来提升 PHP 的性能, 存储预编译字节码的好处就是省去了每次加载 ...
- 多线程（RunLoop）
1.RunLoop的概念及作用 2.RunLoop的使用 3.RunLoop的相关类 4.RunLoop的工作原理 5.小结 6.思考 什么是RunLoop? 从字面意思上是一直循环跑,事实上就是一个 ...