jquery焦点图片轮播原理分析

jquery

前言

图片轮播是网站常见的元素，网上一搜出来一堆代码，但很少有详细分析轮播图的，只是一堆代码放上去，解释和注释都很少。虽然可以把别人的代码改改拿来用，但不是自己的，总觉得很没有成就感。今天我们就来讨论一下怎样自己写轮播图。只要把基本原理搞清楚了，就能自己做那些漂亮炫酷的效果了。

一,功能分析

图片轮播大家都见过，以我自己写的demo为例，上下切换的轮播图，为了简单，只写了焦点切换，包括一下几个步骤：

1. 首先图片得动起来，每隔一段时间往走一张图片
2. 当图片走完一轮后，再从第一张开始动
3. 当图片轮播时，焦点按钮跟着动
4. 当鼠标放入焦点按钮时，切换到相应的图片
5. 当鼠标进入 图片区时，停止播放，离开图片区，继续播放

二,布局

功能分析好后，就根据相应的功能一步步实现吧，先布好局，才能看到效果。
1. 首先用个大容器把整个图片轮播区包起来，里面包括焦点按钮和图片列表
html代码
2. 为了简单，把整个容器的宽高设为图片的宽高，要相对定位，高度溢出时隐藏
css #carousel代码
3. 子容器用绝对定位，因为父容器相对定位了，所以子容器不再相对浏览器窗口定位，而是相对于离它最近的相对定位父级定位。
#carousel ol代码
4. 为了实现圆形焦点的样子，让焦点所在的li的border-radius=width=height #carousel ol li代码
看一下完整的css代码，很简单的
css全部代码

三,行为实现

直接上代码吧，里面有详细的注释
jquery代码
抛开注释，其实代码很短。
注意，如果要实现左右切换的轮播图，只需在，css中使大容器的width足够大，同样溢出隐藏。然后在jquery中获取每个图片的宽度，后面的top变化改成left就好。

后记

今天花了好长时间研究这个图片轮播。之前学习原生js时看教程写了个轮播图，代码很长很复杂。学了jquery后，觉得实现动画很简单，应该不难实现轮播图，一直想自己写个。但因为还没有需求，所以一直拖着。

这两天一个学长让做个页面，里面有轮播图效果，当时不会写，找了好多代码，都没有简洁满意的。找了个unslide.js的插件，焦点切换效果一直没出来。最后不得已用了bootstrap写的。虽然功能实现了，但自己却不会写，一直很遗憾。用bootstrap的其他组件我并没有很遗憾的感觉，因为那些按钮组，下拉菜单，列表组什么的，自己也会写，基本上都是css的东西。只是每个都自己写太浪费时间。所以那些布局什么的用bootstrap这种框架真的很方便快捷。

所以今天花了大半天的时间研究了下轮播图，终于实现了。等有时间了再把那些代码封装一下，以便日后使用。今天就写到这吧。