在和上一任务同一目录下面创建一个task0002_3.html文件，在js目录中创建task0002_3.js，并在其中编码，实现一个轮播图的功能。
- 图片数量及URL均在HTML中写好
- 可以配置轮播的顺序（正序、逆序）、是否循环、间隔时长
- 图片切换的动画要流畅
- 在轮播图下方自动生成对应图片的小点，点击小点，轮播图自动动画切换到对应的图片
效果示例：http://echarts.baidu.com/ 上面的轮播图（不需要做左右两个箭头）
思路一：
看了网上的教程后，得知
制造轮播图，主要是让图片放在一排；然后让图片只在一个固定的区域内显示，超过该区域的用overflow：hidden进行隐藏；
对放置图片的包裹层css样式设置为position: relative;，图片为absolute；
然后通过JS对图片的left值进行调整，(设置负的left值等等），以显示轮播的效果；
思路二：
在这里我用JQ轮播图制造（渐隐切换的效果）；
对图片进行相关的CSS样式进行设置；不过在这里的话图片是“叠”在一起的，html顺序靠后的图片，显示在最上面；
然后点击相关切换按钮的话，根据点击的设置，对当前图片和其他图片进行”隐藏“，从而让需要展示的图片进行”显示“；
因为上面说了html顺序靠后的图片，显示在最上面，但我们一般想的是第一张图应该显示在最上面；
行，用JQ把它搞定；选择图片列表的第一张图进行显示，其他的图片（兄弟元素）进行隐藏；
//$(".carouselContent li:eq(0)").show().siblings().hide()
其中.siblings()是获得匹配元素集合中每个元素的兄弟元素；这个属性我们后面也会用到；
1、（虽然要求中并没有要我们设置左右切换的按钮，但是嘛，一般都轮播图左右箭头按钮还是必不可少的）
因此先考虑左右按钮对图片进行切换；
想了下操作：点击前进按钮，下一张图片显示，其他图片进行隐藏；当如果当前图片是最后一张图片时候，点击前进按钮就应该是返回显示为第一张图片；
（1）首先设置变量用来记录当前图片所在的顺序（page）；与图片实际的数量（bannerNum）；
（2）点击判断，是最后一张图片就是返回第一张，page=bannerNum；不是就page++；
后退按钮同理；
不过要注意的是.eq()的开始数是从0开始的，也就是如果想选择中第一张图片的话，就是.eq(0);
当然，如果想与page数一致的话，一开始设置page=0就好了。
2、动态生成数字标签；
（1）首先css中设置数字标签的默认状态样式和选中状态的样式；
（2）根据bannerNum数，动态生成对应的数字标签，并且将"第一个“”设置为默认选中状态；
（3）难点在于你如何将当前点击的数字标签与相对应的图片进行绑定？
思路是获取当前点击的数字标签（this）与第一个数字里的相对位置；这里我用了index();i
index() 方法返回指定元素相对于其他指定元素的 index 位置。
index()方法的返回值为Number类型，返回指定元素的索引位置(从0开始算起)。注意：以下文本描述中的当前元素表示当前jQuery对象的第一个元素。
-
如果没有指定参数
object，则返回当前元素
在其所有同辈元素中的索引位置。 -
如果
object为String类型，则将其视作选择器，返回当前元素
在选择器所匹配的元素中的索引位置。如果该选择器不匹配任何元素或者当前元素
不在匹配到的元素内，则返回-1。 -
如果
object为DOM元素或jQuery对象，则返回该元素(或该jQuery对象中的第一个元素)在当前jQuery对象所匹配的元素中的索引位置。
具体参考了：http://www.365mini.com/page/jquery-index.htm；
我想index（）返回值也可以看作bannerNum的值吧，不知道这样想对不对；
之后就也类似左右切换按钮那样，选中的添加选中样式，其他兄弟元素添加未选中的样式；不得不说JQ的链式写法还挺方便的。
同时也在左右切换按钮那里，为数字标签添加切换效果，原理跟按钮那里一样的，这就不多说了。
3、配置轮播的顺序
这里的话只考虑了正序播放；
思路是用一个函数来模拟点击前进按钮，然后再用setInterval,对函数进行定时重复运行；从而显示自动轮播效果；
当然了，为了良好的用户体验，大部分轮播图都是在鼠标移入banner区域时候停止轮播，移出时时候重新进行轮播；
那么用jq的hover函数就搞定了；移入时候清除setInterval事件，移出时候重新运行setInterval事件；
4、总结
制造轮播图的过程还是挺有趣的，一开始感觉很难，但是把步骤分开之后，一点点的实现，真是十分有意思，只要把东西一点点的拆分，难的东西也就没那么难了。
改天再试下那种设置left来改变图片位置的轮播图方法。
<!DOCTYPE html> <html> <head lang="zh"><meta charset="UTF-8"><title>轮播</title><style>a,img,ul,body{margin: 0;padding: 0;}ul,li{list-style: none;}.carouselWrap{position: relative;margin: 0px auto;}.carouselContent{width: 100%;height: 600px;overflow: hidden;}.carouselPrev,.carouselNext{position: absolute;z-index: 2;top: 50%;margin-top: -50px;color: #fff;font-size: 80px;font-weight: bold;text-decoration: none;-webkit-transition: all 0.35s ease-in-out;}.carouselNext{right: 0px;}.carouselContent li {position: absolute;left: 0;top: 0;text-align: center}.carouselContent li img {width: 100%;;height: 600px;}.carouselPrev:hover,.carouselNext:hover {background: rgba(204, 204, 204, 0.4);}.carouselList {position: absolute;bottom: 10px;text-align: center;z-index: 1;width: 100%;}.unsel{color: &478f7;display: inline-block;text-align: center;line-height: 30px;width: 30px;height: 30px;border-radius: 50%;background: #fff;margin-right: 5px;cursor: pointer;}.sel{display: inline-block;text-align: center;line-height: 30px;width: 30px;height: 30px;border-radius: 50%;margin-right: 5px;cursor: pointer;color: #ffffff;background-color: &478f7;}</style><script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> </head> <body> </body> <div class="carouselWrap"><a href="" class="carouselPrev"><</a><a href="" class="carouselNext">></a><ul class="carouselContent"><li><a href=""><img src="banner/banner1.jpg"></a></li><li><a href=""><img src="banner/banner2.jpg"></a></li><li><a href=""><img src="banner/banner3.jpg"></a></li><li><a href=""><img src="banner/banner4.jpg"></a></li><li><a href=""><img src="banner/banner5.jpg"></a></li></ul><p class="carouselList"> </p> </div> <script>var page=1;//开始banner图页码；var bannerNum=$(".carouselContent li").length;//图片个数；for(var i=0;i<bannerNum;i++){var carListspan=$("<span>").append(i+1).addClass("unsel");//按图片数量添加按钮$(".carouselList").append(carListspan);}$(".carouselContent li:eq(0)").show().siblings().hide();//一开始只显示第一张图片；$(".carouselList span").eq(0).removeClass().addClass("sel");//.eq(i）是选择匹配元素的集合为指定的索引的哪一个元素$(".carouselList span").click(function(){var num=$(this).index();//点击时候该span相对与第一个span的 index 位置；$(".carouselContent li").eq(num).fadeIn(500).siblings().fadeOut(500);$(this).addClass("sel").siblings().removeClass().addClass("unsel");//.siblings（）获得匹配元素集合中每个元素的兄弟元素 })$(".carouselNext").click(function(e){e.preventDefault();if(page===bannerNum){$(".carouselContent li").eq(0).fadeIn(500).siblings().fadeOut(500);$(".carouselList span").eq(0).addClass("sel").siblings().removeClass().addClass("unsel");page=1;}else{$(".carouselContent li").eq(page).fadeIn(500).siblings().fadeOut(500);$(".carouselList span").eq(page).addClass("sel").siblings().removeClass().addClass("unsel");page++;}})$(".carouselPrev").click(function(e){e.preventDefault();if(page===1){$(".carouselContent li").eq(bannerNum-1).fadeIn(500).siblings().fadeOut(500);//因为页码数是与dom元素的序列数相差1；$(".carouselList span").eq(bannerNum-1).addClass("sel").siblings().removeClass().addClass("unsel");page=bannerNum;}else{$(".carouselContent li").eq(page-2).fadeIn(500).siblings().fadeOut(500);//page-2其实就是对应li序列中此时显示的图片的上一张图片，因为页码数是与dom元素的序列数相差1$(".carouselList span").eq(page-2).addClass("sel").siblings().removeClass().addClass("unsel");page--;}});$(".carouselWrap").hover(function(){//hover(鼠标移入时候运行的函数，移出时候运行的函数) clearInterval(auto);},function(){auto=setInterval(function(){$(".carouselNext").trigger("click");},3000)});var auto=setInterval(function(){//打开页面后自动播放$(".carouselNext").trigger("click");},3000) </script> </html>