继上一篇随笔,优化3张以上图片轮播React组件
import React from 'react';
import PropTypes from 'prop-types'; import {getSwipeWay} from '../utils/swipe'; //imgs : 图片src数组
//playTime : 轮播下一张图片的时间间隔
//notAuto : 是否开启自动轮播 默认开启 false const PropsChecker = {
imgs : PropTypes.array.isRequired,
playTime : PropTypes.number,
notAuto : PropTypes.bool,
}; class Carousel extends React.Component {
static defaultProps = {
playTime : 5000,
notAuto : false,
} constructor(args){
super(args);
this.state = {
};
//缓存各个currIndex的ul之后的标签
this.storeElements = {};
//判断滑动手势
this.swipeWay = getSwipeWay(50);//闸值50
//图片显示的限制
this.limit = 3;
//当前展示的图片
this.currIndex = 0;
//展示的数组
this.showImgs = [];
//手势滑动坐标
this.position = {
x1:0,
x2:0,
y1:0,
y2:0,
};
//<ul>
this.Ul = null;
//禁止在transiton的期间操作
this.isTransition = false;
//定时器
this.timer = 0;
} componentDidMount(){
this.autoPlay();
} componentWillUnmount(){
clearTimeout(this.timer);
} getHead(arr){
if(Array.isArray(arr)){
return arr[0];
}
console.error('非数组');
} getLast(arr){
if(Array.isArray(arr)){
const len = arr.length;
return arr[len-1];
}
console.error('非数组');
} calcIndex(){
const {imgs} = this.props;
const len = imgs.length;
const limit = this.limit;
const currIndex = this.currIndex; if(currIndex == 0){
this.showImgs = imgs.slice(0,limit - 1);
this.showImgs.unshift(this.getLast(imgs));
return;
} if(currIndex == len - 1){
this.showImgs = imgs.slice(len -2 ,len);
this.showImgs.push(this.getHead(imgs));
return;
} this.showImgs = imgs.slice(currIndex -1 , currIndex + limit -1); } changeCurrIndex(flag){
const {imgs} = this.props;
const last = imgs.length -1;
const currIndex = this.currIndex;
if(flag === '-'){
this.currIndex = currIndex == 0 ? last : currIndex -1 ;
return;
} if(flag === '+'){
this.currIndex = currIndex == last ? 0 : currIndex + 1 ;
return;
}
} ulTranslate(value){
const Ul = this.Ul;
if(Ul){ if(Ul.style.webkitTranslate ){
Ul.style.webkitTranslate = value;
}else{
Ul.style.translate = value;
} } } createUl(){
const currIndex = this.currIndex;
const storeElements = this.storeElements; //缓存这些标签,避免多次创建,很有必要
if(!storeElements[currIndex]){
//要保证<ul>key不同 也就是每次轮播后都要是新的标签,有损性能
const Ul = (<ul onTouchEnd={this.touchEnd}
onTouchMove={this.touchMove}
onTouchStart={this.touchStart}
onTransitionEnd={this.transitionEnd} ref={(ele)=>this.Ul=ele} key={currIndex}> {this.createLis()}
</ul>); storeElements[currIndex] = Ul;
} return storeElements[currIndex];
} createLis(){
this.calcIndex();
const imgs = this.showImgs; return imgs.map((src,i)=>{
const liStyle = {
// translate:(-i)+'00%',
translate:( (i+'00') - 100 ) + '%',
WebkitTranslate:( (i+'00') - 100 ) + '%',
}; return <li className='item' key={i} style={liStyle} ><img src={src} /></li>;
}); } touchStart = (e) => {
if(this.isTransition){
return;
} clearTimeout(this.timer); const {clientX,clientY} = e.touches[0];
this.position.x1 = clientX;
this.position.y1 = clientY;
} touchMove = (e) => { } touchEnd = (e) => {
if(this.isTransition){
return;
} const {clientX,clientY} = e.changedTouches[0];
this.position.x2 = clientX;
this.position.y2 = clientY; const {x1,x2,y1,y2} = this.position; const direction = this.swipeWay(x1,x2,y1,y2); if( direction === 'Left'){
this.changeCurrIndex('+');
this.isTransition = true;
this.ulTranslate('-100%');
} if(direction === 'Right'){
this.changeCurrIndex('-');
this.isTransition = true;
this.ulTranslate('100%');
}
} next(){
this.changeCurrIndex('+');
this.isTransition = true;
this.ulTranslate('-100%');
} autoPlay(){
const {playTime,notAuto} = this.props;
if(!notAuto){
this.timer = setTimeout(()=>{
this.next();
},playTime);
}
} transitionEnd = (e) => {
this.forceUpdate(()=>{
this.isTransition = false;
this.autoPlay();
});
} render(){ return (<div className='mm-carousel' >
{this.createUl()}
</div>);
}
} export default Carousel; Carousel.propTypes = PropsChecker;
继上一篇随笔,优化3张以上图片轮播React组件的更多相关文章
- VS2010/VS2013项目创建及通过ADO.NET连接mysql/sql server步骤(VS2013连接成功步骤见上一篇随笔)
本随笔主要是对初学者通过ADO.NET连接数据库的步骤(刚开始我也诸多不顺,所以总结下,让初学者熟悉步骤) 1.打开VS新建一个项目(这里的VS版本不限,建项目都是一样的步骤) VS2010版本如图: ...
- iOS开发UI篇—UIScrollView控件实现图片轮播
iOS开发UI篇—UIScrollView控件实现图片轮播 一.实现效果 实现图片的自动轮播 二.实现代码 storyboard中布局 代码: #import "YYV ...
- 【转】 iOS开发UI篇—UIScrollView控件实现图片轮播
原文:http://www.cnblogs.com/wendingding/p/3763527.html iOS开发UI篇—UIScrollView控件实现图片轮播 一.实现效果 实现图片的自动轮播 ...
- 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播
1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...
- Android Studio导入GitHub上的项目常见问题(以图片轮播开源项目为实例)
前言:github对开发者而言无疑是个宝藏,但想利用它可不是件简单的事,用Android studio导入开源项目会遇到各种问题,今天我就以github上的一个图片轮播项目为例,解决导入过程中的常见问 ...
- 安装php rabbitmq扩展,继上一篇安装Rabbitmq
1 安装 rabbitmq-c,C 与 RabbitMQ 通信需要依赖这个库,这里只贴出正确的步骤,错误类型太多,不一一举例,大部分都是安装问题,缺少组件,安装目录问题 git clone git:/ ...
- 继上一篇bootstrap框架(首页)弄的资讯页面
还是和上一篇首页一样给出每一步的注解: 做的有点简单,但是,以后还是会加深的.毕竟是初学者嘛! <html lang="zh-cn"> <head> ...
随机推荐
- 《ERP真的免费不花钱·企业自主实施OdooERP》试读:第十章-仓库条码操作案例
文/开源智造联合创始人老杨 本文来自<企业自主实施OdooERP>的试读章节.书籍尚未出版,请勿转载.欢迎您反馈阅读意见. 案例背景 各位读者同学,本案例假定读者已经完成了进销存案例练习. ...
- Windows下MySQL8.0.13解压版安装教程
下载 MySQL8.0.13-64位下载地址 在下载页面的底部,有三种安装包,第一种是MySQL的安装程序,下载完点击安装即可. 第二种是普通的压缩版,体积较小. 第三种是自带debug和测试的压缩版 ...
- mysql 主从 binlog
binlog: 用来记录mysql的数据更新或者潜在更新(update xxx where id=x effect row 0);文件内容存储:/var/lib/mysql mysqlbinlog - ...
- linux安装odbc for mysql
1 安装驱动包 yum install unixODBC-devel -y yum install -y mysql-connector-odbc 2 配置数据源 [root@omserver-11 ...
- 最短路之Floyd(多源)HDU 1874
#include <iostream> #include <cstdio> #include <cstring> using namespace std; #def ...
- __str__,__repr__,__format__
__str__,__repr__ __str__:控制返回值,并且返回值必须是str类型,否则报错 __repr__:控制返回值并且返回值必须是str类型,否则报错 __repr__是__str__的 ...
- JavaScript Allongé 第一呷 :基础函数 (1)
第一呷 :基础函数 关于函数,尽管少,但毫不逊色. 在javascript中,函数是值,但它们不仅仅是简单的数值,字符串,或者甚至复杂的数据结构树或者地图.函数表示要执行的运算.就像数值.字符串和数组 ...
- CentOS 7.x升级内核
第一种针对当前内核版本的小版本升级可以采用如下方法: [root@localhost ~]# uname -r -.el7 [root@localhost ~]# yum list kernel [r ...
- watir-webdriver使用过程中异常
1.在jruby版本1.6.7中,报异常:not such file to load --watir-webdriver 解决方法 :在文件的首行添加:require 'rubygems' ...
- git代理设置方法
客户公司办公,上外网需要代理,临时查一下资料,记录一下: 1.设置代理: git config --global http.proxy http://IP:Port 2.代理设置完成后,查看设置是否生 ...