我的上篇博客实现了用纯原生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"); })