图片轮播效果，实现思想！

图片轮播效果，基本上，一个网站，其它效果都可以没有，但是基本上都存在图片轮播的效果。

这里就说说制作的思路。方法有很多种。因人而异。

结构分析

１　要轮播的图片　 bigM［］

２　底部小圆圈按钮smallM［］　当你点击任意小圆圈，切换到对应的图！　第０个小圆圈对应第０张的图。。。第１个小圆圈对应第１张的图。。。。　记住！数字是对应的

开始：

　假设　我们要轮播的图有６张：　０　１　２　３　４　５　　　　　

　第一步：设置这６张图片在同一个位置，同一区域。　用 position: absolute;

　第二步：设absolute之后，所有的图片就重叠在一起了。 此时决定哪张显示出来。用 z-index

　　　　　这里默认　０　这张图片的 z-index　为１吧，显示这张。其余的图片默认为０

切换思想：

通过控制 z-index的来决定让哪张图片显示。如果你想让　３　这图片显示，　就把　３　的 z-index提到最高！

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

通过点击　前一张按钮　　后一张按钮　　和小圆圈　切换图片

点击小圆圈：前面提到了，点击任意的小圆圈，切换对应的图片。　　　数字对应数字！

点击前一张按钮：０变成０　　即　０－＞５　１－＞０　　２－＞１　　　３－＞２　　４－＞３　　５－＞４　　

点击后一张按钮：　　　　　　即　０－＞１　１－＞２　　２－＞３　　　３－＞４　　４－＞５　　５－＞０

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

我们先设两个全局变量：

var　now＝０；　为什么是０　　因为前面我默认第０张图片显示！　通过now的变换，来切换对应的图片

var　ZIndex＝１；　为什么是１　　因为前面我默认第０张图片的层级为１！通过ZIndex来决定图片的层级

bigM［now］.style[z-index]=ZIndex

实现点击后一张按钮：

后一张按钮 .onclick=function(){
            now++;　　／／０－＞１；　

　　　ZIndex++;　　／／ZIndex＝２　　　

　　　bigM［now］.style[z-index]=ZIndex

　　　然后让第now张图片的　层级为ZIndex，这样子１　这张图片的层级就变为了２　　显示出来了！

　　　然后点击。。点击。。一直到now＝５　　此时５这张图片的层级为６；

　　　然后再次点击下一张的图片，now就变在６了，我们也没６这图片，所以这时候now的应该等于０！这样就回到第０张图片了；

　　　ZIndex仍然＋＋　此时第０图片的层级就变成是高的了，就显示出来了
        }

实现点击前一张按钮：

同理，点两前一张按钮：　now－－；　ZIndex仍然＋＋

bigM［now］.style[z-index]=ZIndex

点击小圆圈按钮：

点击任意一个小圆圈，记录下当前所在的索引值。

将now＝当前的索引值，ZIndex仍然＋＋

bigM［now］.style[z-index]=ZIndex

这样就将第now张图片显示出来

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

ＯＫ！其余细节部分

当bigM［now］　层级提上来的时候，你想以透明度渐变的方式　　还是滑动出来的形式　还是其它什么的动画形式　　　任自己发挥了

小圆圈按钮部　一般显示出来的图片对应的小圆圈颜色和其它的小圆圈颜色不一样！方法：

１　将所有的小圆圈恢复成默认颜色

２　smallM［now］.style[color]=颜色　

完毕！