js 功能-轮播图效果-获取元素 &自动滚动|学习笔记

简介: 快速学习 js 功能-轮播图效果-获取元素 &自动滚动

开发者学堂课程【移动 Web 前端开发:js 功能-轮播图效果-获取元素 &自动滚动】学习笔记,与课程紧密联系,让用户快速学习知识。

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


js 功能-轮播图效果-获取元素&自动滚动

 

基本内容

一、index.js

二、功能的实现


一、index.js

var banner = function(){

/*

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

* 2.点盒子对应改变 (改变当前样式)

* 3.可以滑动 (touch 事件 监听触摸点坐标改变距离 位移)

* 4.当滑动距离不够的时候 吸附回去 (过渡 位移)

* 5.当滑动距离够了的时候 跳转上一张 下- -张 (判断方向 过渡 位移) * */

1、如果要实现上述的步骤,那么就需要获取需要操作的 dom 元素, 当前的轮播图肯定需要, 因为它是一个大容器所以必须要拿到;

/* 轮播图盒子:大容器已经找到*/

var banner = document . querySelector('.jd_banner');

通过这个大容器:轮播图盒子,可以知道轮播图的长度是多少。

如下图蓝色边框所示:

image.png

/*轮播图宽度*/

// 位移一个轮播图宽度;

var width = banner. offsetwidth;

/*图片容器*/

var imageBox = banner .querySelector(‘ul:first-child‘);(正确)

var imageBox = banner .querySelector(‘ul:first‘);(错误)

给当前的 ul 是否加入了类名? 找到ul所在的程序,发现并没有给 ul 加入类名;

问:通过 banner 元素使用 querySelector 可以吗?

答:可以。

问:如果需要找到 ul,那么怎样找到第一个 ul?

答:var imageBox = banner .querySelector(‘ul:first-child’)(错误)

ul:first-child 是一个第三选择体,querySelector 支持有效的 css 选择体,ul:first 在 css 中也是有效的,但是并不会执行,如下图所示:

 image.png

 

暴露出了一个错误,一个错误的 querySelector 执行方法, 在查出元素的时候,ul:first 是一个无效的选择器。ul:first 在 css 当中无法使用,将 ul:first  单独拿出来,在 index.js 里面, 代码将会报错,是一个无效的代码, 是一个无效的选择器,querySelector 无法使用一个无效的选择窃取执行程序;如下图所示:

ul:first {

}

l 那么同样的 ul:eq(0)也是在 css 中为无效选择器,

var imageBox = banner .querySelector(‘ul:eq(0)‘);(错误)

ul:eq(0){

}

l 注意:ul:first 是一个无效选择器,其实是 jquery 封装的选择器,在css中是无效的。

l querySelector 所使用的选择器,就是 css 当中的有效选择器。

l querySelector 无法用一个无效选择器去启动

/*图片的点容器*/

var pointBox = banner .querySelector(‘ul:first-child‘)

// 现在所创建的轮播图是一个较大的轮播图, 然后又是一个较长的 box, 接着是一个叫小的 point box, point box 里面所有的点都需要作为样式, 所以说除了获取到/*图片的点容器*/,还需要获取到/*所有的点*/

/*所有的点*/

var point = pointBox . querySelectorAll( ‘li ‘)

//此时拿到了所有的“li”

image.png

l var point = pointBox . children( 错误 )

//这是 jquery 的拿出方法,但是在执行时却出现了错误;

children 不是一个方法

l var point = pointBox . childNode( 不实用 )

拿到所有的节点和“‘’li‘”, 但是这样的方法不实用,所以采取第一种办法;

console.log( points )

{

var downTime = function() {

}

 

二、功能的实现

所有的元素都已经获取到了,现在需要实现第一个功能。

第一个功能

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

1、首先需要的是定时器/*定时器*/

问: 现在需要依赖的所以是多少?

答:当前定位是1;首页默认显示索引1 的图片;

var index = 1

首先需要定时器,得到它之后,每隔一秒执行一次;

每定时一次索引需要加 1;

写这个程序的目的就是要它滚动,

问:那么需要依靠谁来让它滚动? 答:需要依赖于索引。

var timer = setInterval ( function ( ) {

index ++;

每定时一次索引需要加1;

2、其次需要的是/*过渡*/

时器已经准备好了,现在需要过渡;当前的 Css 中没有加入过渡,找到轮播图的程序中的第一个 ul, 发现并没有给轮播图加入过渡,

}

jd_banner ul:first-child {

width: 1000%;

jtransform: translateX( - 10%) ;

- webkit- transform: translatex( - 10%);

}

如果想让它显示动画那就必须要给它加入过渡;给第一个 ul 加入过渡;

imageBox. style. transition = 'all e.2s';

imageBox. style.webkitTransition = 'all 0.2s'; /*兼容*/

目的:保证第三属性更加的健壮。

3、最后进行/*位移*/

问: 需要给谁加入位移呢?

答:给它自己。

问:假设任何位移都没有移动, 那么它位移的距离就是为零;假设他  默认移动了一张图片的距离, 那么差移动的这些距离是多少呢?

答:10%

问:当移动一个轮播图的宽度时,这个宽度等于多少?

答:-index*width

imageBox.style.transform= 'translatex(+‘(-index*width)’+‘px’)'; 

imageBox.style.webkittransform='translatex(+‘(-index*width)’+‘px‘)';/*兼容*/

/当前屏幕的宽度/&/*轮播图宽度*/

}, 1000);

{

var downTime = function() {

}

4、当这一系列程序开始启动之后,刷新之后,轮播图就会产生一个自动的定时的轮播效果 轮播图就会具有一个自动转播的动画效果。如下图所示:

image.png

相关文章
|
3天前
|
JavaScript 前端开发
JavaScript如何遍历表单元素?
JavaScript如何遍历表单元素?
|
7天前
|
JavaScript 前端开发
js制作九宫格抽奖功能
js制作九宫格抽奖功能
8 0
|
2月前
|
前端开发 JavaScript 索引
|
2月前
|
JavaScript
如何用js在页面中添加元素?
如何用js在页面中添加元素?
15 0
|
3天前
|
移动开发 HTML5
编程笔记 html5&css&js 024 HTML表单元素
编程笔记 html5&css&js 024 HTML表单元素
|
4天前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
|
15天前
|
前端开发 JavaScript 开发者
Canvas库 fabric.js可以实现哪些功能? 动图介绍
fabric.js是一个canvas库,今天整理了一下fabric.js可以实现的功能,用动图的形式分享给大家,方便快速了解fabric.js。
Canvas库 fabric.js可以实现哪些功能? 动图介绍
|
25天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML1、H5文本元素
H5+CSS3+JS逆向前置——HTML1、H5文本元素
19 0
|
1月前
|
前端开发 JavaScript API
JavaScript中多种获取数组最后一个元素的策略。
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
2月前
|
JavaScript 前端开发
如何使用JS实现轮播图
如何使用JS实现轮播图
18 0