zoukankan      html  css  js  c++  java
  • 简单的轮播图小插件

     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>
  • 相关阅读:
    作为管理者的基本职责
    websocket接口自动化的封装
    locust性能测试的使用
    git的协作提交流程
    关于接口自动化的实施步骤
    K8S的组件梳理
    jenkins pipeline中,失败后获取异常不中断业务
    pipline在执行的docker镜像中添加hosts
    sonar搭建
    django
  • 原文地址:https://www.cnblogs.com/sunnie-cc/p/6051950.html
Copyright © 2011-2022 走看看