布局思路：一个大的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; width: 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", "宋体"; width: 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.
