jQuery 制作无缝轮播的焦点图 认证专享

成为vip会员,免费看所有精品课程
  • 目录

    目录 收起>

    本课程主要学习 JavaScript 的焦点图的实例,会用到定时器 setInterval,并且可以使用到 jQuery 的 mouseover 鼠标事件及 click 点击事件,通过 animate 动画方法,制作一个可自动和手动控制的无缝轮播焦点图。

    1.无缝轮播概念的详解及框架的搭建 00:19:51

    无缝轮播是将左右方向的切换或上下方向的切换进行无间断的连续播放,这种体验方式最佳,在淘宝官网的轮播图、好123页面焦点图都采用这种方式。

    2.手动点击左右按钮控制轮播的切换 00:12:05

    使用 jQuery 中的点击事件,使用左右按钮,控制图片的上下切换,封装动画函数将代码进行精简。

    3.无缝概念的引入及实现原理 00:15:20

    使用画图软件讲解无缝轮播的实现原理,并通过 jQuery 的方法完成无缝的创建

    4.为无缝轮播添加自动和手动动画 00:09:23

    通过 setInterval 定时器,将图片进行自动轮播,并且通过相应的按钮,可以手动控制相应图片的切换。

    5.调试 Bug 并将代码进行简化 00:14:11

    调试动画运行中出现的 Bug,并将代码进行简化处理
  • 提问

    提交问题
  • 下载

  • 线路

    视频太卡?试试切换线路 √ 线路1 √ 线路2
  • 收藏

    收藏课程
  • 分享

连播

连续播放

关灯

关灯模式
视频加载太慢?

我们有两条线路可以选择,试试切换线路吧

jQuery 制作无缝轮播的焦点图

5课时,71分钟2016-03-03
写代码的平面师
写代码的平面师

极客学院签约布道师

课程背景:
网站上经常见到焦点图动画,焦点图的动画有多种,如:淡入淡出型、上下滑动型、左右滑动型、左右滑动无缝型,对比用户体验的话,无缝轮播方式是最好的,因为在播放多张图片的情况下不会出现间断感,该课程用最简单易懂的方式,让你学会独立制作与开发。

核心内容:
1.JavaScript 函数
2.setInterval 定时器
3.jQuery 的 animate 动画
4.jQuery 的 mouseover 及 click 事件
5.无缝概念的理解

软件环境:Dreamweaver

是否提供资料:

课程等级:中级

适合人群:
具有 JavaScript 基础或 jQuery 基础的同学
  • 技术问答

相关课程

  • 使用 jQuery 实现多种类型的导航条(上)

    本课程主要通过 jQuery 和 CSS3 进行实际应用,实现在网站中常见的多种类型的导航条,学习完这个课程可以轻松的应用 jQuery 和 CSS3 的各种交互特效,以及 jQuery 的动画插件jquery.easing.1.3 的使用。

    4课时 104分钟
    中级
    10381人学习
  • 使用 jQuery 制作京东网的焦点图

    本课程主要学习 JavaScript 的函数,会用到定时器setInterval,并且可以使用到 jQuery 的mouseover 鼠标事件及 click 点击事件,通过 animate 动画方法,制作一个可自动和手动控制的轮播焦点图。

    4课时 65分钟
    中级
    11625人学习
  • 在 jQuery 中使用 AJAX

    jQuery 是当前应用最广泛的 JavaScript 库,它提供了大量 AJAX API,提升了 AJAX 使用的便利性,本课程详细讲解 jQuery AJAX 相关 API 的使用。

    4课时 92分钟
    初级
    20133人学习
  • Three.js 核心对象

    本课着重讲解 Three.js 的核心对象,对场景、Object3D、相机、渲染器、材质、贴图以及基本灯光等常用对象进行详细介绍,为后面实战开发打好理论基础。并通过相应的实例小程序,加深和巩固理论知识,做到知其所以然。

    6课时 33分钟
    初级
    9684人学习