<!--
布局思路：一个大的div,中有一个ul.和一个箭头的div
css样似描述：
整个盒子距离顶部100px，又水平居中 盒子的宽高为图片的实际宽高
由于每次都是看见了一张图片：有两种方式：
第一种：要么li用了浮动，然后结合overflow:hidden。让超出的部分消失
第二种：li绝对定位==》则父级元素ul,或者li的爷级元素 相对定位 （子绝父相）
默认显示第一张图片，所以其他的li应该隐藏起来。
按钮默认是隐藏起来的，光标放上去，按钮显示出来，用了hover属性
按钮的样式修饰：
有宽高，分别靠在最左边和最右边，垂直方向居中;==>因此有绝对定位，left:0;right:0;top:50%;
-->
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.slider {
height: 340px;
790px;
margin: 100px auto;
position: relative;
}
.slider li {
position: absolute;
/* display: none; */
}
.slider li:first-child {
display: block;
}
.arrow {
display: none;
}
.slider:hover .arrow {
display: block;
}
.arrow-left,
.arrow-right {
font-family: "SimSun", "宋体";
30px;
height: 60px;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
top: 50%;
/* margin-top: -30px;*/
cursor: pointer;
text-align: center;
line-height: 60px;
color: #fff;
font-weight: 700;
font-size: 30px;
}
.arrow-left:hover,
.arrow-right:hover {
background-color: rgba(0, 0, 0, .5);
}
.arrow-left {
left: 0;
}
.arrow-right {
right: 0;
}
</style>
布局的部分
<div class="slider">
<ul>
<li><a href="#"><img src="images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="images/5.jpg" alt=""></a></li>
<li><a href="#"><img src="images/6.jpg" alt=""></a></li>
<li><a href="#"><img src="images/7.jpg" alt=""></a></li>
<li><a href="#"><img src="images/8.jpg" alt=""></a></li>
</ul>
<!--箭头-->
<div class="arrow">
<span class="arrow-left"><</span>
<span class="arrow-right">></span>
</div>
</div>
JS部分
var count = 0;
$(".arrow-right").click(function () {
count++;
if(count == $(".slider li").length){
count = 0;
}
console.log(count);
//让count渐渐的显示，其他兄弟渐渐的隐藏
$(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
});
$(".arrow-left").click(function () {
count--;
if(count == -1){
count = $(".slider li").length - 1;
}
console.log(count);
//让count渐渐的显示，其他兄弟渐渐的隐藏
$(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
});
});
</script>
<!-- 图片轮播的思路是：
点击右边的按钮，图片向前移动一张：分析==》
（1）给右边的按钮注册事件----(2)点击一下,索引加1----（3）判断是否是最后一张---（4）若果是，索引值为0.---(5)对应图片的索引值显示出来，其他的兄弟元素消失。
点击左边边的按钮，图片向后移动一张：分析==》
（1）给右边的按钮注册点击事件--（2）点击一下，索引减1---（3）判断是否是负1，----（4）若是，索引值为图片的长度减1---(5)对应图片的索引值显示出来，其他的兄弟元素消失。
注意点：索引值最初为0，但是它表示第一张图片哦; 当它为leng-1时，表示的是最后一张图片; 所以索引值为length时，重新将索引值赋值为0;
因此当点击左边的按钮时，索引为0时，表示第一张图片哦 所以索引值为-1时，重新将索引值赋值为length-1.
-->
