开发者学堂课程【移动 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');
通过这个大容器：轮播图盒子，可以知道轮播图的长度是多少。
如下图蓝色边框所示：
/*轮播图宽度*/
// 位移一个轮播图宽度;
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 中也是有效的，但是并不会执行，如下图所示：
暴露出了一个错误，一个错误的 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”
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、当这一系列程序开始启动之后，刷新之后，轮播图就会产生一个自动的、定时的轮播效果。 轮播图就会具有一个自动转播的动画效果。如下图所示：
