网站基本都会有一个banner模块，展示各种内容，大致长下面这样：

从图中可以得知该模块由“一组可点击的图片”和“两个按钮”组成，图片组可以放在一个ul列表中，并用div容器存放，两个按钮应该和图片组并列放在div容器中，所以整体的html结构如下：

为了让模板不死板，我们可以给div容器添加一个配置属性data-setting，通过设置该属性的值（键值对）来确定模块的一些参数值，例如模块的宽度、高度、与最面图片的缩放比例、对齐方式等等。可以在构造函数中设置以上参数值的默认值。 整个模块的实现采用面向对象的方法，主要是要先定好最上面那张图的位置，然后剩余图片的位置以最上面图片为参考。js实现主要为以下几部分：

一：首先可以设置一个默认的配置参数对象setting； 二：然后获取前面传过来的配置参数data-setting，用jQuery的扩展对象方法extend()去扩展setting对象； 三：根据setting中的参数值去控制整个模块的宽高，最上面图片的宽高、位置及层次，左右按钮的宽高及层次； 四：以最上面图片为参考设置左右两边图片的大小、位置、透明度及层次； 五：当所有图片位置关系确定好了之后，接下来要实现的就是点击按钮时切换图片，切换图片时应该记录当前图片的上一图片或下一图片的参数，然后用动画进行过渡过去； 六：最后给整个模块添加一个自动旋转的功能。

具体的实现放在了github上：https://github.com/DreamFJ/JavascriptDemo/tree/master/banner

慕课网上有视频讲解，挺不错的一个网站。