JS拖拽专题(二)-「实战」滑动轮播图的那点事儿

迎来到我的JS拖拽专题系列文章，更多精彩内容持续更新中，欢迎关注：)

上一章节我们说到了在js中拖拽的基本原理，即我们在鼠标按下的时候计算出鼠标位置和物理的位置的差值，这个差值在移动的过程中不恒定不变的。所以我们可以根据鼠标的位置计算出物理的位置以达到拖拽的效果。

本章目标

轮播图的基本布局
拖拽的变形使用滑动触发图片的移动

先来看下我们今天要实现示例吧！

手动滑动改变轮播图

这种效果在我们传统的web应用中经常遇到。下面我们就来一步步的解析这个效果的核心技术。

布局

一个父容器，我们将它的宽高设置为图片的宽高，容器里面的3张大小一样的图片排成一列。

html:

然后需要将ul里面的li元素水平排列，方法有很多，我使用的是CSS3的flex布局。

CSS：

将父容器设置overflow:hidden，将溢出的内容隐藏掉。因为ul下面的图片我们可能是任意个，所以我们要对ul的宽进行一个动态的计算：

ul.style.width=一个li的宽 * li.length;

这里li的宽高和图片的宽高一样，不再动态获取，直接硬编码了。

var containerW=520;
ul.style.width=li.length * containerW + 'px';

到这里，而已基本完成了。接下来就是核心的js拖拽的变形了。

拖拽的变形

我们从gif图中分析一下：

一、我可以拖着ul左右滑动，这时候就要注意了，ul的滑动距离刚好就是鼠标按下时和移动时的位置差。即在mousedown的时候，获取到鼠标的起始位置

ul.onmousedown=e=>{
 var startX=e.pageX ;
}

在轮播图中，有一个核心的变量，那就是当前显示的是第几张图，我把它定义为iNow

鼠标抬起的时候，如果滑动的距离小于li的宽度的1/3时，则不进入到下一张图片中。否则进入下一张图片并且设置一个动画，

document.onmouseup=e=>{
	
	if(e.pageX - startX > containerW/3){
		this.iNow++;//上一张
	}else if(startX - e.pageX > containerW/3){
		this.iNow--;//下一张
	}
	ul.style.transition='.3s';
	ul.style.transform='translateX('+(this.iNow*containerW)+'px)';
	document.onmouseup=document.onmousemove=null;
}

完整的代码：

这样一个简单的滑动轮播图的效果就实现了。

总结：

1、轮播图的基本布局，水平放一排，然后父级设置溢出隐藏。

2、水平方向上拖拽ul,鼠标按下和移动产生的距离差值就是当前ul的滑动距离。

3、当松开鼠标的时候，判断滑动距离与图片的宽的1/3相比，进一步判断图片是停留在当前页还是上一页下一页。(这个1/3是我自定义的，你们可以根据需求自行调整)。

这里是【畅哥聊技术】JS拖拽专题系列技术文章，更多精彩内容持续更新中。。。

未完待续。。。

了控制篇幅，本打算分3篇文章来讲述轮播图实现的，后来想了想，JS代码量其实很少，完全没必要，所以这篇文章就是收尾。

昨天，我们完成了结构和布局设计，今天我们来完成JavaScript逻辑部分。我这人比较有代码洁癖，不喜欢过多的变量污染全局作用域，习惯使用自执行的匿名函数包裹一个功能块。我们所有的JS代码都在如下函数内部编写：

(function () {
  // ... ... 我们的代码都写到这儿
})();

我们的程序中需要用到多个DOM元素，所以我们先拿到它们的引用存储到变量中。

/** @type {HTMLDivElement} 轮播图容器 */
  const carouselWrapper=document.querySelector('.carousel-wrapper')
  /** @type {HTMLUListElement} banner列表元素 */
  const slides=carouselWrapper.querySelector('.slides')
  /** @type {HTMLDivElement} 指示器 */
  const indicator=carouselWrapper.querySelector('.indicators')
  /** @type {NodeListOf<HTMLLIElement>} 指示器节点列表 */
  const indicatorItems=indicator.querySelectorAll('.indicator-item')
  /** @type {HTMLUListElement} 导航按钮列表元素 */
  const nav=carouselWrapper.querySelector('.nav')

接下来，我们定义一些常量和变量，建议大家定义常量名使用全大写字母下划线分割。

 /** 活动类名 */
  const ACTIVE_CLS_NAME='active'
  /** 左导航按钮类名 */
  const CLS_NAME_NAV_LEFT='nav-left'
  /** 右导航按钮类名 */
  const CLS_NAME_NAV_RIGHT='nav-right'
  /** 取消过渡的类名 */
  const CLS_NAME_NO_TRANSITION='no-transition'
  /** 定时器间隔 */
  const TIMER_DELAY=3000

  /** 定时器id */
  let timerId
  /** 当前指示器索引 */
  let currentIndex=0
  /** 当前banner索引 */
  let currentslideItemIndex=0
  /** 过渡结束标识 */
  let transitionendFlag=true

要做到左右滚动的无缝切换，我们必须至少拷贝banner列表中的第一和最后一个元素，将其追加到banner列表尾部，并更新banner列表的宽度。为了节省代码，我完全拷贝了一份banner列表的子元素。我们用一个函数来做这件事，代码如下：

function updateSlides() {
    slides.innerHTML +=slides.innerHTML
    slides.style.width=`${slides.childElementCount * 100}%`
  }

当用户单击指示器项的时候，我们需要切换当前显示的banner图。首先需要确定被单击指示器项的索引。我们用一个函数来实现，代码如下：

function getTargetIndex(el) {
    for (let i=0, len=indicatorItems.length; i < len; i++) {
      if (indicatorItems[i]===el) {
        return i
      }
    }
    return -1
  }

索引确定了，我们需要根据索引来更新X轴的平移值。当然，要实现左右滚动，我们还有其它实现方案，例如：改变可滚动元素的滚动条位置，改变元素的左右定位等。那么，为什么使用3D平移变换呢？原因之一就是，浏览器会对3D平移变换开启GPU硬件加速渲染，以获得更好的性能，直观感受就是动画非常丝滑，毫无拖泥带水之感。我们用一个函数来更新X轴平移，代码如下：

function updateTranslateX(index, targetIndex=-1) {
    // 如果过渡没有结束，直接返回
    if (!transitionendFlag) return
    // 当前指示器移除活动类
    indicatorItems[currentIndex].classList.remove(ACTIVE_CLS_NAME)
    // 如果没有提供目标索引，就把index赋给它
    if (targetIndex < 0) {
      targetIndex=index
    }
    // 目标指示器添加活动类
    indicatorItems[targetIndex].classList.add(ACTIVE_CLS_NAME)
    // 将当前索引设为目标索引
    currentIndex=targetIndex
    // 将当前banner索引设为index
    currentslideItemIndex=index
    // 改变banner列表元素的X轴平移变换
    slides.style.transform=`translateX(-${index / slides.childElementCount * 100}%)`
  }

以下是指示器单击处理函数的实现。这个代码很简单，首先获取目标指示器项的索引，如果找到了，就根据该索引更新banner列表的X轴平移。

/** @param {MouseEvent} e */
  function indicatorClickHandler(e) {
    const index=getTargetIndex(e.target)
    index >=0 && updateTranslateX(index)
  }

接下来，我们实现左右导航按钮的单击。首先，我们需要一个向左和向右滚动的函数，代码如下：

function toNext() {
    // 指示器项的数量
    const len=indicatorItems.length
    if (currentIndex < len) {
      if (currentIndex===len - 1) {
        // 继续滚动到下一个索引位置，并将目标索引设为0
        updateTranslateX(currentIndex + 1, 0)
      } else {
        updateTranslateX(currentIndex + 1)
      }
    } else {
      updateTranslateX(0)
    }
  }

  function toPrev() {
    const len=indicatorItems.length
    if (currentIndex < 1) {
      // 去掉过渡
      slides.classList.add(CLS_NAME_NO_TRANSITION)
      // 让索引为len的banner图可见
      updateTranslateX(len, len - 1)
      setTimeout(()=> {
        // 添加过渡
        slides.classList.remove(CLS_NAME_NO_TRANSITION)
        // 让索引为len-1的banner图可见，此时有过渡
        updateTranslateX(len - 1)
      }, 0)
    } else {
      updateTranslateX(currentIndex - 1)
    }
  }

以下是左右导航按钮单击事件处理函数的实现。我们根据是否包含指定的类名，来判断单击的哪个按钮，进而执行不同的导航函数。

/** @param {MouseEvent} e */
  function navClickHandler(e) {
    /** @type {{target: HTMLElement}} */
    const { target }=e
    if (target.classList.contains(CLS_NAME_NAV_RIGHT)) {
      toNext()
    } else if (target.classList.contains(CLS_NAME_NAV_LEFT)) {
      toPrev()
    }
  }

我们还需要监听banner列表的过渡开始和结束事件。过渡开始事件处理函数非常简单，只是将过渡结束标志设为了false，代码如下：

function slidesTransitionstartHandler(e) {
    transitionendFlag=false
  }

下面是过渡结束事件处理函数定义，其实也很简单。

  function slidesTransitionendHandler(e) {
    transitionendFlag=true
    if (currentslideItemIndex >=indicatorItems.length) {
      // 取消过渡
      slides.classList.add(CLS_NAME_NO_TRANSITION)
      updateTranslateX(0)
      setTimeout(()=> {
        // 再添加回过渡
        slides.classList.remove(CLS_NAME_NO_TRANSITION)
      }, 0)
    }
  }

我们还需要让轮播图可以间隔一定时间自动切换。所以，我们需要实现开始和结束定时器的函数。这两个函数非常简单，代码如下：

function startTimer() {
    timerId=setInterval(toNext, TIMER_DELAY)
  }

  function stopTimer() {
    clearInterval(timerId)
    timerId=null
  }

现在，是时候让我们的轮播图动起来了。我们首先调用更新banner列表函数，然后开始定时器，最后注册事件监听器。

  updateSlides()
  startTimer()
  // 指针进入容器的时候停止定时器
  carouselWrapper.addEventListener('mouseenter', stopTimer)
  // 指针离开容器的时候开始定时器
  carouselWrapper.addEventListener('mouseleave', startTimer)
  nav.addEventListener('click', navClickHandler)
  indicator.addEventListener("click", indicatorClickHandler)
  slides.addEventListener('transitionstart', slidesTransitionstartHandler)
  slides.addEventListener('transitionend', slidesTransitionendHandler)

最终实现的效果图如下：

童鞋们都学废了吗？是不是很简单？感谢阅读！

前面两篇文章，学习了JavaScript中DOM、BOM相关基础知识后，今天我们将结合前面所学内容，利用DOM操作实现常见的网页动画效果；结合知识点有相关案例效果演示，另外本文所设计的源码和配套素材可在文末获取；

JavaScript网页特效

学习目标

offset的属性与作用
client的属性与作用
scroll的属性与作用
封装简单动画函数
网页轮播图

I、元素偏移量

获得元素距离带有定位父元素的位置

获得元素自身的width和height

1.offset常用的属性

2.offset与style的区别

案例：获取鼠标在盒子内的坐标

思路：盒子内的坐标可以通过鼠标事件的e.pageX获取到页面坐标再减去element.offsetLeft来得到；

var box=document.querySelector('.box');
box.addEventListener('click',function(e){
    var x=e.pageX - this.offsetLeft;
    var y=e.pageY - this.offsetTop;
    console.log('x:'+x+',y:'+y);
})

案例：模态框拖拽

需求：

（1）点击弹出层，会淡出模块框，并且显示灰色半透明的遮挡层；

（2）点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层；

（3）鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动；

（4）鼠标松开，可以停止拖动模态框移动；

分析：

（1）拖拽事件，鼠标是按着的状态，故mousemove和mouseup须卸载mousedown事件里面；

（2）在拖拽的过程中，鼠标的位置相对于组件的坐标是不变的，因此为了改变组件的位置，需要将页面坐标减去相对组件坐标来获取；

var link=document.querySelector('#link');
var login_window=document.querySelector('#login');
var close_button=document.querySelector('#closeBtn');
var bg=document.querySelector('#bg');
link.addEventListener('click',function(){
    login_window.style.display='block';
    bg.style.display='block';
})
close_button.addEventListener('click',function(){
    login_window.style.display='none';
    bg.style.display='none';
})
// 拖动事件三个过程：mousedown、mousemove、mouseup
var title=document.querySelector('#title');
title.addEventListener('mousedown',function(e){
    var x=e.pageX - login_window.offsetLeft;
    var y=e.pageY - login_window.offsetTop;
    document.addEventListener('mousemove',move);
    function move(e){
        login_window.style.left=e.pageX - x + 'px';
        login_window.style.top=e.pageY -y + 'px';
    }
    document.addEventListener('mouseup',function (e) {
        document.removeEventListener('mousemove',move);
    });
});

案例:仿京东放大镜效果

分析：

（1）mask界面与big界面可以通过鼠标事件设置dispaly属性即可；mouseover显示mask，mouseleave隐藏mask、mousemove移动mask

（2）mask的left与top的值可以通过鼠标在prew_img中的位置来获取；

（3）为了让mask界面中央跟着鼠标指针走，则需要减去mask尺寸一半的偏移量；

（4）防止mask页面跑出prew_img，需要对偏移量进行判断；

（5）大图片移动距离怎么计算？mask移动距离/mask最大移动距离=大图片移动距离/大图片最大移动距离；所以大图片移动距离=mask移动距离 * 大图片移动最大距离 / 遮挡层最大移动距离；

window.addEventListener('load',function(){
    var prew_img=document.querySelector('.preview_img');
    var mask=document.querySelector('.mask');
    var big=document.querySelector('.big');
    prew_img.addEventListener('mouseover',function(){
        mask.style.display='block';
        big.style.display='block';
    })
    prew_img.addEventListener('mousemove',function(e){
        // 获取鼠标在prew_img元素内的坐标
        var x=e.pageX - this.offsetLeft;
        var y=e.pageY - this.offsetTop;
        // 防止mask页面跑出prew_img盒子
        var maskX=x - mask.offsetWidth / 2;
        // 遮挡层的最大移动距离maskMax
        var maskMax=this.offsetWidth - mask.offsetWidth;
        if(maskX <=0){
            maskX=0;
        }else if(maskX >=maskMax){
            maskX=maskMax;
        }
        var maskY=y - mask.offsetHeight / 2;
        if(maskY <=0){
            maskY=0;
        }else if(maskY >=maskMax){
            maskY=maskMax;
        }
        // 让mask界面中央跟着鼠标指针走
        mask.style.left=maskX + 'px';
        mask.style.top=maskY + 'px';
        // 让big界面内容跟着mask位置移动，
        // 大图片移动距离=mask移动距离 * 大图片移动最大距离 / mask最大移动距离
        var big_img=document.querySelector('.bigImg');
        var bigMax=big_img.offsetWidth - big.offsetWidth;
        // 大图片移动距离
        var bigMoveX=maskX * bigMax / maskMax;
        var bigMoveY=maskY * bigMax / maskMax;
        big_img.style.left=-bigMoveX + 'px';
        big_img.style.top=-bigMoveY + 'px';
    });

    prew_img.addEventListener('mouseleave',function(){
        mask.style.display='none';
        big.style.display='none';
    });
});

II、元素的可视区

立即执行函数

不需要调用，立马能自己执行的函数;

// 写法一：
(function(){})()
// 写法二：
(function(){}())

立即执行函数也可以传递参数：

(function(a,b){
console.log(a+b);
})(1,2)

立即执行函数的作用是独立创建了一个作用域，里面所有的变量都是局部变量，不会有命名冲突的情况；

III、元素滚动scroll

使用scroll系列相关属性可以动态得到元素的大小、滚动距离；

scroll系列属性 作用备注 element.scrollTop 返回被卷去的上侧距离返回的数值不带单位 element.scrollLeft 返回被卷去的左侧距离返回的数值不带单位 element.scrollWidth 返回自身的实际宽度，不含边框返回的数值不带单位 element.scrollHeight 返回自身的实际高度，不含边框返回的数值不带单位

案例：仿淘宝固定侧边栏

1.原先侧边栏是绝对定位
2.当页面滚动到一定的位置，侧边栏改为固定定位
3.页面继续滚动，会让顶部显示出来

页面被卷去的头部可以通过：window.pageYOffset来获得

// 1.获取元素
var sliderBar=document.querySelector('.slider-bar');
var topBar=document.querySelector('.header');
var banner=document.querySelector('.banner');
var main=document.querySelector('.main');
var goBack=document.querySelector('.goBack');

var barHeight=banner.offsetTop;
var sliderBarTop=sliderBar.offsetTop;
var fixTop=sliderBarTop - barHeight;
var mainTop=main.offsetTop;
// 2.页面滚动事件
document.addEventListener('scroll',function(){

    if(window.pageYOffset >=barHeight){
        sliderBar.style.position='fixed';
        sliderBar.style.top=fixTop + 'px';
    }else{
        sliderBar.style.position='absolute';
        sliderBar.style.top=sliderBarTop + 'px';
    }
    if(window.pageYOffset >=mainTop){
        goBack.style.display='block';
    }else{
        goBack.style.display='none';
    }
})

IV、鼠标事件

当鼠标移动到元素上时就会触发mouseenter事件，类似mouseenter

两者的区别是：mouseover鼠标经过自身盒子会触发、经过子盒子也会触发；而mouseenter只有经过自身盒子才会触发；

原因是mouseenter不会冒泡；跟mouseenter搭配的通常是mouseleave

V、动画函数

1.动画实现的原理：

通过定时器setInterval()不断移动盒子位置；

实现步骤：

获得盒子当前位置
让盒子在当前位置加上一个移动距离
加上一个结束定时器的条件
盒子需要添加定位，才能使用element.style.left

//利用setInterval设置一个box元素从左向右移动400像素的动画
var box=document.querySelector('.box');
var timer=setInterval(function(){
    if(box.offsetLeft > 200){
        // 停止动画，本质上是清除定时器
        clearInterval(timer);
    }
    box.style.left=box.offsetLeft + 5 + 'px';
},50);

2.动画函数的封装

将动画函数封装起来，利用JS是动态语言的特性，通过设置对象的方式，给每个不同的元素指定不同的定时器；

// 简单动画函数的封装,目标对象obj,目标位置target
function animate(obj,target){
    // 如果设置一个按钮启动动画，会存在一个bug,只要不断点击按钮，动画会越走越快；
    // 原因是启动了太多定时器，解决方案是，让元素只有一个定时器执行
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
    if(obj.offsetLeft > target){
        // 停止动画，本质上是清除定时器
        clearInterval(obj.timer);
    }
    obj.style.left=obj.offsetLeft + 5 + 'px';
},50);
}
//利用setInterval设置动画
var btn=document.querySelector('button');
var box1=document.querySelector('.box1');
btn.addEventListener('click',function(){
    animate(box1,400);
});

3.缓动动画原理

缓动动画就是让元素运动速度有所变换，最常见的就是让速度慢慢停下来；

思路：让盒子每次移动的距离慢慢变小；

核心算法：每次移动的步长=(目标值-现在的位置)/10这里的10是份数可以是9也可以是8；

停止的条件是：当前盒子的位置等于目标位置就停止定时器；

// 缓动动画
function animate(obj,target){
    // 清除定时器
    clearInterval(obj.timer);
    obj.timer=setInterval(function() {
        // 每次运行定时器都要重新计算步长值，所以步长值写在定时器里面
        var step=(target - obj.offsetLeft)/10;
        // 如果step是正值则往大取整，如果step是负值则往小取整
        step=step >=0 ? Math.ceil(step) : Math.floor(step);
        if(obj.offsetLeft==target){
            clearInterval(obj.timer);
        }
        // 缓动动画核心算法：前进步长=（目标-当前）/ 10
        obj.style.left=obj.offsetLeft + step + 'px';
    },50);
}

动画函数添加回调函数

回调函数原理：函数可以作为一个参数，将这个函数作为参数传入到另一个函数里面，当这个函数执行完成后，再执行传进去的这个函数，这个过程叫做回调。

回调函数位置：写到定时器结束的位置

// 缓动动画
function animate(obj,target,callback){
    // 清除定时器
    clearInterval(obj.timer);
    obj.timer=setInterval(function() {
        // 每次运行定时器都要重新计算步长值，所以步长值写在定时器里面
        var step=(target - obj.offsetLeft)/10;
        // 如果step是正值则往大取整，如果step是负值则往小取整
        step=step >=0 ? Math.ceil(step) : Math.floor(step);
        if(obj.offsetLeft==target){
            clearInterval(obj.timer);
            if(callback){
                // 调用函数
                callback();
            }
        }
        // 缓动动画核心算法：前进步长=（目标-当前）/ 10
        obj.style.left=obj.offsetLeft + step + 'px';
    },50);
}

将动画函数封装到单独的JS文件

在head里引入JS文件

<script src="animate.js"></script>

实际调用过程中可以直接调用JS中定义的函数

var sliderbar=document.querySelector('.sliderbar');
var con=document.querySelector('.con');
sliderbar.addEventListener('mouseenter',function(){
    animate(con,-160,function () {
        // 动画执行完毕，将左箭头转为右箭头
        sliderbar.children[1].innerHTML='→';
    });
})
sliderbar.addEventListener('mouseleave',function(){
    animate(con,0,function () {
        sliderbar.children[1].innerHTML='←';
    });
})

案例：网页轮播图

功能需求：

鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮；
鼠标点击右侧按钮一次，图片往左播放一张，以此内推，左侧按钮同理；
图标播放的同时，下面小圆圈模块跟随一起变化；
点击小圆圈，可以播放相应图片；
鼠标不经过轮播图，轮播图也会自动播放图片；
鼠标经过，轮播图模块，自动播放停止

window.addEventListener('load', function () {
    //===0.定义变量，获取元素
    var focus=document.querySelector('.focus');
    var arrowL=document.querySelector('.arrow-l');
    var arrowR=document.querySelector('.arrow-r');

    //===1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮；=====focus.addEventListener('mouseenter', function () {
        arrowL.style.display='block';
        arrowR.style.display='block';
        clearInterval(timer);
        timer=null;
    });
    focus.addEventListener('mouseleave', function () {
        arrowL.style.display='none';
        arrowR.style.display='none';
        timer=window.setInterval(function () {
            arrowR.click();
        }, 3000);
    });
    //===2.根据轮播图的数量自动生成小圆圈
    var ul=focus.querySelector('ul');
    var ol=focus.querySelector('.circle');
    var pictureWidth=focus.offsetWidth;
    // 获取到轮播图图片的数量length
    var length=ul.children.length;
    // 显示当前图片的索引
    var circle=0;
    // 显示当前图片的索引
    var num=0;
    // 创建元素插入到ol中
    for (var i=0; i < length; i++) {
        var li=document.createElement('li');
        // 给没一个小圆圈添加一个index属性，方便点击事件的ul移动长度的确定
        li.setAttribute('index', i);
        // 给每一个小圆圈添加点击事件
        li.addEventListener('click', function () {
            // 移除其他小圆圈的选中属性
            for (var i=0; i < length; i++) {
                ol.children[i].className='';
            }
            // 设置当前选中小圆圈的选中属性
            this.className='current';
            // 定义选中的小圆圈的索引
            var index=this.getAttribute('index');
            num=index;
            circle=index;
            animate(ul, -pictureWidth * index);
        });
        ol.appendChild(li);
    }
    ol.children[0].className='current';

    //===3.鼠标点击右侧按钮一次，图片往左播放一张，以此内推，左侧按钮同理；==// 为了实现无缝滚动，需要将第一张图添加到最后一张图中
    var lastLi=ul.children[0].cloneNode(true);
    ul.appendChild(lastLi);
    // 设置一个节流阀，防止按钮在短时间内点击过多
    var flag=true;
    arrowR.addEventListener('click', function () {
        if (flag) {
            flag=false;
            if (num==ul.children.length - 1) {
                ul.style.left=0;
                num=0;
            }
            num++;
            animate(ul, -pictureWidth * num, function () {
                flag=true;
            });
            circle++;
            if (circle==ol.children.length) {
                circle=0;
            }
            activateCircle(circle);
        }
    });

    arrowL.addEventListener('click', function () {
        if (flag) {
            flag=false;
            if (num==0) {
                num=ul.children.length - 1;
                ul.style.left=-num * pictureWidth + 'px';
            }
            num--;
            animate(ul, -num * pictureWidth, function () {
                flag=true;
            });
            if (circle==0) {
                circle=ol.children.length;
            }
            circle--;
            activateCircle(circle);
        }
    });

    // 排他法思想点亮小圆圈
    function activateCircle(index) {
        for (var i=0; i < ol.children.length; i++) {
            ol.children[i].className='';
        }
        ol.children[index].className='current';
    }

    // 实现轮播图自动播放
    var timer=window.setInterval(function () {
        arrowR.click();
    }, 3000);
});

显示效果：

轮播图自动播放的原理是：设置一个定时器使用click（）函数模拟按钮点击事件；

轮播图实现无缝滚动的原理是：将第一个图动态加在最后一张图上，当切到最后一张图时，重新设置元素布局距离，再执行滑动动画。

防止同一个按钮在短时间内点击次数过多，可以设置一个节流阀，将启动节流阀的操作写在动画回调函数里，这样只有当动画执行完毕后才才可以重新恢复按钮的点击功能；

页面滚动动画可以使用函数：window.scroll(x,y)可以滚动至页面的指定坐标位置；

最后：

本文配套源码与素材获取：https://gitee.com/yushengtan/jscode
关于JavaScript在网页动画中的使用就介绍到这里，下一节我们将继续深入介绍JavaScript的异步调用相关知识的学习~

在线咨询

上一篇：html+css实现的扁平简洁登录页面html源码
下一篇：HTML核心标记-你有get到哪些？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商