jQuery封装轮播图插件

这是我自己封装的第一个插件，感觉挺好的，嘿嘿~~~

先说使用方法把！

swiper("banner2")   传入轮播盒子的class名就可以了

使用页面的基本结构

   

这个盒子你可以无限遍历

支持width：100%;

js 文件：

function swiper(names) { var idxs = 0; var timer = null; var obj = $("." + names); obj.parent().css({ "overflow": "hidden", "position": "relative", "-webkit-user-select": "none" }) let wid = obj.parent().width(); let hig = obj.parent().height(); var imgs = obj.find("img").length; var imgfirst = obj.children().eq(0).html(); var imglast = obj.children().eq(imgs - 1).html(); var classname = obj.children().attr("class") obj.prepend('

' + imglast + '

') obj.append('

' + imgfirst + '

') imgs = obj.find("img").length; obj.css({ "width": (wid * imgs) + "px", "height": hig + "px", "position": "absolute", "left": -wid, "top": "0" }) obj.children("div").each(function(i, ele) { $(ele).css({ "width": wid, "height": hig, "position": "absolute", "top": "0px", "left": (wid * i) + "px", "overflow": "hidden", "display": "flex", "justify-content": "center", "align-items": "center" }) }) obj.find("img").css({ "max-width": wid, "max-height": hig }) obj.parent().append('

') for (var i = 0; i < imgs - 2; i++) { $(".dots").append('

') } $(".dots").css({ "width": wid, "height": "50px", "position": "absolute", "left": "0", "bottom": "10px", "display": "flex", "justify-content": "center", "align-items": "center", "cursor": "pointer" }) $(".dots").children().css({ "width": "10px", "height": "10px", "border-radius": "50%", "margin": "0 5px", "background-color": "#000" }) $(".dots").children().eq(0).addClass("dot-hover") obj.parent().append('

<=

') obj.parent().append('

=>

') $(".swiper-left").css({ "width": "50px", "height": "50px", "text-align": "center", "line-height": "50px", "color": "#000", "position": "absolute", "left": "0px", "top": "50%", "margin-top": "-25px", "font-size": "30px", "cursor": "pointer", "font-weight": "600" }) $(".swiper-right").css({ "width": "50px", "height": "50px", "text-align": "center", "line-height": "50px", "color": "#000", "position": "absolute", "right": "0px", "top": "50%", "margin-top": "-25px", "font-size": "30px", "cursor": "pointer", "font-weight": "600" }) $(window).resize(function() { wid = obj.parent().width(); hig = obj.parent().height(); obj.css({ "width": (wid * imgs) + "px", "height": hig + "px", "position": "absolute", "left": -wid, "top": "0" }) obj.children("div").each(function(i, ele) { $(ele).css({ "width": wid, "height": hig, "position": "absolute", "top": "0px", "left": (wid * i) + "px", "overflow": "hidden", "display": "flex", "justify-content": "center", "align-items": "center" }) }) obj.find("img").css({ "max-width": wid, "max-height": hig }) $(".dots").css({ "width": wid, "height": "50px", "position": "absolute", "left": "0", "bottom": "10px", "display": "flex", "justify-content": "center", "align-items": "center", "cursor": "pointer" }) $(".dots").children().css({ "width": "10px", "height": "10px", "border-radius": "50%", "margin": "0 5px", "background-color": "#000" }) }) $(".swiper-right").on("click", function() { rightbtn(); }) $(".swiper-left").on("click", function() { leftbtn(); }) $(".dots p").on("click", function() { idxs = $(this).index(); $(".dots").children().eq(idxs).addClass("dot-hover").siblings().removeClass("dot-hover"); move() }) function rightbtn() { if (idxs + 1 >= imgs - 1) { idxs = 0; obj.css("left", -wid + "px"); } idxs++; if (idxs + 1 >= imgs) { $(".dots").children().eq(0).addClass("dot-hover").siblings().removeClass("dot-hover"); } else { if (idxs >= imgs - 2) { idxs = 0; } $(".dots").children().eq(idxs).addClass("dot-hover").siblings().removeClass("dot-hover"); } move() } function leftbtn() { if (idxs + 1 <= 1) { idxs = imgs - 2; obj.css({ "left": -(imgs - 1) * wid }) } idxs--; if (idxs >= imgs) { $(".dots").children().eq(0).addClass("dot-hover").siblings().removeClass("dot-hover"); } else { $(".dots").children().eq(idxs).addClass("dot-hover").siblings().removeClass("dot-hover"); } move(); } function move() { obj.animate({ "left": -wid * (idxs + 1) + "px" }, 100) } timer = setInterval(rightbtn, 3500); $(".swiper-right").hover(function() { clearInterval(timer) }, function() { timer = setInterval(rightbtn, 3500); }) $(".swiper-left").hover(function() { clearInterval(timer) }, function() { timer = setInterval(rightbtn, 3500); }) $(".dots p").hover(function() { clearInterval(timer) }, function() { timer = setInterval(rightbtn, 3500); }) }

以上就是插件代码。可能问题还是有，应该都是小问题，但是我用起不出问题就好了。