布局：
div.slider > ul + div.arrow
ul > ll（*8）> a > img
div.arrow > span.arrow-left + span.arrow-right
案例分析：
当左箭头一点击，上一张图片渐渐的显示，其他图片渐渐的隐藏
当右箭头一点击，下一张图片渐渐的显示，其他图片渐渐的隐藏
关键代码
$(function(){ var count=0; $(".arrow-left").click(function(){ count--; if(count<0) { count=7; } $(.slider li).eq(count)。fadeIn().siblings().fadeOut(); }) $(".arrow-right").click(function(){ count++; if(count > 7) { count=0; } $(".slider li").eq(count).fadeIn().siblings().fadeOut(); }) })
完整代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>京东商城</title> <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> </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){ if (count>7) { count = 0; } console.log(count); //让count渐渐的显示，其他兄弟渐渐的隐藏 $(".slider li").eq(count).fadeIn().siblings().fadeOut(); }); $(".arrow-left").click(function () { count--; //if(count == -1){ if (count<0) { //count = $(".slider li").length - 1; count=7; } console.log(count); //让count渐渐的显示，其他兄弟渐渐的隐藏 $(".slider li").eq(count).fadeIn().siblings().fadeOut(); }) }); </script> </body> </html>