简单的轮播图小插件

Posted 2020-08-19 Sunnie_C

 1 (function () {
 2     $.fn.moreImg = function () {
 3         var allpar = Array.prototype.slice.call(arguments);//获取传过来的参数,打散成数组,如对这个有疑问可以参考我收藏的【优雅代码】深入浅出 妙用Javascript中apply、call、bind的那个文章，作者讲的老好了

 4         var elem = allpar[0];
 5         var allImg = allpar[1];
 6         if (allImg.length > 0) {
 7             $.each(allImg, function (i,v) {
 8                 $(elem).append("<img src=" + v + " style=\'display:none\'>");//添加图片到指定容器，先将所有的轮播的图片隐藏
 9             })
10             var imgs = $(elem).find("img");
11             var moveImg = setInterval(function () {//无限次定时重复执行，除非clearInterval(moveImg);
12                 var tIndex = $(elem).find(".sThis");//显示图片的唯一标示
13                 if (tIndex.length > 0) {
14                     if ($(tIndex.next()).length>0) {
15                         $(tIndex.next()).show().addClass("sThis");
16                         $(tIndex.next()).siblings().hide().removeClass("sThis");
17                     } else {
18                         $(imgs[0]).show().addClass("sThis");
19                         $(imgs[0]).siblings().hide().removeClass("sThis");
20                     } 
21                 } else {
22                     $(imgs[0]).show().addClass("sThis");
23                 }
24             }, 1000)
25         }
26     }
27 })(jQuery)

 

1 <script>
2         var arr = ["image/sf2-bg.jpg","image/top_logo.png","image/ken.png","image/ken-tatsumaki-senpuu-kyaku.png"]
3         $(function () {
4             $("#login").click(function(){
5                 $(this).moreImg($("#cll"), arr);//调用自己写的小插件里的函数
6             })
7             
8         })
9     </script>
10  <div id="cll">点击</div>