京东轮播图
有个计数的，点右边，计数增加，判断计数是否超过总的长度，超过设置计数为0，再设置当前的图片动画，兄弟的图片动画
左边点击同理，计数是--，判断计数是否等于-1，等于则reset计数为总长度，在设置当前的图片动画，兄弟的图片动画
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>京东商城</title> <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> </head> <body> <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> <script src="jquery-1.12.4.js"></script> <script> $(function () { 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().fadeOut(); }); $(".arrow-left").click(function () { count--; if (count == -1) { count = $(".slider li").length - 1; } console.log(count); $(".slider li").eq(count).fadeIn().siblings().fadeOut(); }); }); </script> </body> </html>
