前端系统课程 - 29. jQuery 做轮播图

代码分离

  • 内容、样式、行为分离，在当下是一种大多数开发者认为理所当然的共识。

  • 代码分离解决的最主要的问题是代码维护。

  • 理所当然的问题，可以用“如果不”的方式去回答，例如设想使用 HTML 文件操作样式会使更新样式工作繁复；使用 CSS 操作内容导致内容无法被选中、获取或搜索；使用 JS 操作样式有可能改变样式布局（举例了 jQuery 中的 show() 和 hide() 方法）等等。

轮播

  • 利用”拉洋片“的原理……

  • 朝哪个方向滑动，就把图片朝哪个方向连起来。

  • 尽量使用 CSS3 的代码，现在的兼容性已经很好了。

  • 在知道图片宽高时，尽量将 <img> 标签的 width 和 height 属性填写上，以便在图片无法显示时，也不会影响布局。

  • 取模运算可以用来配合循环定时器，n % length 可以将操作轮次一直控制在固定的长度范围内。例如：

    1
    2
    3
    4
    5
    var n = 0;
    setInterval(() => {
        console.log(n % 3);
        n++;
    }, 1000); // 每秒会打印出n对3取的余数，也就是0、1、2如此循环

  • 本课涉及的 jQuery API：

    • on() 方法，第一个参数是监听的事件，第二个是要执行的函数，这个函数也可以接收事件信息参数；

    • css() 方法，传入一个对象，对象中是要修改的 CSS 样式代码；

    • index() 方法可以获取元素在兄弟节点中的排序；

    • trigger() 方法可以激活参数指定的事件；

    • eq() 方法可以获取 jQuery 对象列表中指定下标的某个元素，这个元素任然是 jQuery 对象而不是 DOM 对象，这就是此方法区别于直接使用方括号或 get() 方法的特性；

    • addClass() 方法可以给对象添加指定的 class 属性，与之相对应的删除方法是 removeClass()；

    • siblings() 方法可以获取对象的所有兄弟元素节点；

    • 要创建一个标签，可以直接在 $() 方法中以字符串形式传入标签，例如：$('<li></li>') 就可以创建一个 <li> 标签；

    • appen() 方法可以将新建的 jQuery 对象添加为目标元素的子元素；

    • 如果要对多个元素进行相同操作，可以将多个元素一并选中，并用逗号隔开，例如：$('.test1, .test2')；