利用jQuery实现轮播图

序：

我的上篇博客实现了用纯原生js实现轮播图戳这里，这篇再用jquery实现一下。

原理：

一行多个，水平移动，截取显示，通过left控制移动

效果：

其实按钮的样式还可以进一步美化一下的，我这里只实现一下效果

代码：

可以去这里看完整的代码： git地址 心情好的话给我的star吧

这里只贴一下js的部分关键代码：

//向右 $("#right").click(function () { var st = $(".wrap")[0].style.left; var ind = parseInt(st.split('p')[0]); if (ind < -1800) { $(".wrap").animate({ left: "-1200px" }, "fast"); ind = -1200; } else { $(".wrap").animate({ left: "-=600px" }, "fast"); ind -= 600; } btnsHeight(ind); }) //向左 $("#left").click(function () { var st = $(".wrap")[0].style.left; var ind = parseInt(st.split('p')[0]); if (ind > -600) { $(".wrap").animate({ left: "-1200px" }, "fast"); ind = -1200; } else { $(".wrap").animate({ left: "+=600px" }, "fast"); ind += 600; } btnsHeight(ind); }) //切换按钮 $(".btns button").click(function (e) { var loc = -600 * $(this)[0].id + "px"; //按钮颜色改变 $(this)[0].style.color = "pink"; for (let i = 0; i < $(".btns button").length; i++) { if ($(".btns button")[i] != $(this)[0]) { $(".btns button")[i].style.color = "black"; } } //移动滑块 $(".wrap").animate({ left: loc }, "fast"); })