旋转图片的方式有很多种，这里采用的是淡入淡出的形式

js原生和jQuery都可以实现。jquery使用起来简单得多，因为它封装了许多用法。其实就是用js原生来模拟这些用法。

但无论如何，都有必要构建一个基本的表达层

简单图片转盘一般由几个部分组成。

对于淡入和淡出

1.首先，它是一个外围部分(事实上，它是最外面的整个包装)

2.然后是你设置图片转盘的地方(也就是一个横幅)

3.然后是一个图片组(你可以使用新的div或者直接使用ul - li格式)

4.然后在图片的底部放置一个透明的背景层

5.然后是图片描述信息层，它位于透明背景层(div或ul - li)的左下角

6.然后是按钮层，用来定位图片组的索引，放在透明背景层的右下角(div或者ul - li)

7.当然，有时会在图片的两端放置两个箭头和箭头来指示图片转盘的方向(这里不先使用，但如果您想使用它，也是如此)

因此，可以首先构建html结构

div class='包装'！-最外面的部分-div class=' banner '！-旋转木马零件-ul class=' imglist '！-图片部分-Li class=' imgon ' a href=' # ' img src=' http :/img/test 1 . jpg ' width=' 400 px ' height=' 200 px ' alt=' puss in boots 1 '/a/lilia href=' # ' img src=' http :/img/test 2 . jpg ' width=' 400 px ' height=' 200 px ' alt=' puss in boots 2 '/a/Li lia href=' # ' img src=' http :/img/test 3 . jpg ' width=' 400 px ' height=' 200 px ' alt=' puss in boots 3 '/a/Li lia href=' # ' img src=' http :/img/test4 . jpg ' width=' 400 px ' height=' 200 px ' alt=' puss in boots 4 '/a/Li lia href=' # ' img src=' http :/img/test 5 . jpg ' width=' 400 px ' height=' 200 px ' alt=' puss in boot 5 '/a/Li/ul div class=' BG '/div！-图片底部的背景层- ul class='infoList '！-图片左下角的文本信息-Li class=' infoon ' boot 1中的pus/Li boot 2中的lipus/Li boot 3中的lipus/Li boot 4中的lipus/Li boot 5中的lipus/Li/ul class='索引列表'！-图片右下角的序号部分-Li class=' index on ' 1/Li Li 2/Li Li/Li Li 4/Li Li 5/Li/ul/div/div图片部分的alt说明是infoList部分的信息内容，有时可以绑定。需要注意的是，imgList中图片的宽度和高度最后都是立即设置的，但是如果在css中统一设置会比较慢。

我在active的所有三个部分都添加了相应的on类，实际使用中可能不需要那么多的active类

接下来，为它设置css样式

style type='text/css' body，div，ul，li，a，img { margin 3360 0；padd : 0；} ul，Li { list-style : none；} a { text-decoration : none；} .包装器{position:相对；margin: 30px自动；宽度： 400 px；高度： 200 px；} .横幅{ width: 400px高度： 200 px；飞越：隐藏；} .imgL