轮播图案例
展示
项目链接
https://download.csdn.net/download/weixin_45525272/14932730
代码
<!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("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(); }) // 设置每秒点击一次 即自动播放轮播图 setInterval(function () { $(".arrow-left").click(); },2000); }); </script> </body> </html>
