IFE JavaScript Task0002-3 小练习3：轮播图组件
在和上一任务同一目录下面创建一个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>
