js 功能-无缝滑动 |学习笔记

简介: 快速学习 js 功能-无缝滑动

开发者学堂课程【移动 Web 前端开发:js 功能-无缝滑动】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/594/detail/8419


js功能-无缝滑动

 

基本内容

一、需求原因

二、无缝滑动

 

一、需求原因

当第八页的滑动效果已经超过了一半这时候该怎么办此时将会跳到索引为9的一张图片这个过程会产生过渡效果此时会有动画效果产生动画后将会被索引监听有了过渡之后将会瞬间定位到第一张图片这就是无缝滚动

* 1.无縫滚动&无縫滑动( 定时器 过渡 位移 )

写这个程序的目的就是要它滚动,那么需要依靠谁来让它滚动? 依赖于索引。

var index = 1;当前定位是1;首页默认显示索引1 的图片;

首先需要定时器,每隔一秒执行一次;每定时一次索引需要加1,

var timer = setInterval ( function ( ) {

index ++;

/*过渡*/

addTransition();

/*位移*/

setTranslateX(-index*width);

},1000);

/*怎么监听过渡结束这个时间点 过渡结束事件*/

imageBox . addEventlistener( ' transitionend',function(){

/*无缝滚动*/

 

二、无缝滑动

当第一张图片往右滑动的时候滑动到已经超过零索引一半的时候将会直接切换到 0 索引然后在瞬间定位到索引为8的图片上

动画结束之后并且 index ≤ 0;

if(index >=9 ){

/*瞬间定位到第一张*/

index = 1;

/*清除过渡*/

removeTransition();

/*定位*/

setTranslatex( - index*width);

}

/*无缝滑动*/

else lif(index <= 0){

当索引≤0的时候瞬间定位到第八怎么样瞬间定位首先清除过渡做定位

index = 8 ;

/*清除过渡*/

removeTransition();

/*定位*/

setTranslatex( - index*width);

l 此时图片的左右都已经被控制做到了无缝滑动

l 除了以上情况在其他情况下都是正常的

相关文章
|
3天前
|
前端开发 JavaScript 开发者
Canvas库 fabric.js可以实现哪些功能? 动图介绍
fabric.js是一个canvas库,今天整理了一下fabric.js可以实现的功能,用动图的形式分享给大家,方便快速了解fabric.js。
Canvas库 fabric.js可以实现哪些功能? 动图介绍
|
21天前
|
JavaScript 前端开发
JavaScript如何实现 选项卡功能
JavaScript如何实现 选项卡功能
10 0
|
21天前
|
存储 JavaScript
js如何实现分页功能
js如何实现分页功能
8 0
|
21天前
|
JavaScript
|
21天前
|
JavaScript 前端开发
|
26天前
|
存储 前端开发 JavaScript
解锁 JavaScript 数组的强大功能:常用方法和属性详解(下)
解锁 JavaScript 数组的强大功能:常用方法和属性详解(下)
|
26天前
|
存储 前端开发 JavaScript
解锁 JavaScript 数组的强大功能:常用方法和属性详解(上)
解锁 JavaScript 数组的强大功能:常用方法和属性详解(上)
|
1月前
|
存储 JavaScript
【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记
【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记
16 0
|
1月前
html+css+js完成代码弹出功能
html+css+js完成代码弹出功能
16 0
|
1月前
|
存储 JavaScript 前端开发
JS演示如何制作利息功能
JS演示如何制作利息功能
14 0