原生js---轮播图封装函数

最新推荐文章于 2022-03-02 10:01:53 发布

默燃灬

最新推荐文章于 2022-03-02 10:01:53 发布

阅读量661

点赞数 1

文章标签：函数

本文链接：https://blog.youkuaiyun.com/qq_37481081/article/details/72542805

版权

本文介绍了一个使用原生JavaScript实现的轮播图封装函数，通过简单的参数配置即可实现图片轮播效果，并支持左右切换功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生js---节点轮播图封装函数

第一次在优快云上这个平台上写博客，以后多写博客来与大家分享与交流。有问题的地方还请各位大神指导。废话少说，上代码。

/*操作轮播图*/
  function nodeLunbo(obj,left,right,imgBox,imgone){
    var lunbo=obj;//调用方法
    var left=left;//点击左边切换
    var right=right;//点击右边切换
    var imgBox=imgBox;//装IMG的盒子
    var width=parseInt(getStyle(imgone,"width"));//获取其中一个的宽度
    var t=setInterval(move,1500);//设置时间函数
    var n=2;//设置需要移动的数量
    function move(){//定义函数
      animate(imgBox,{left:-width*n},600,function(){
        for(var i=1;i<n;i++){
          var imgFirst=getFirst(imgBox);
          imgBox.appendChild(imgFirst);//循环完追加到前面 继续循环
        }
        imgBox.style.left="0px";//刚开始的时候盒子的位置
      });
    }
    lunbo.onmouseover=function(){//鼠标放上去的时候轮播暂停
      clearInterval(t);
    }
    lunbo.onmouseout=function(){//鼠标离开的时候轮播开始
      t=setInterval(move,1500);
    }
    left.onclick=function(){//点击左边的按钮，图片切换
      for(var i=1;i<=n;i++){
        var last=getLast(imgBox);
        var First=getFirst(imgBox);
        insertBefore(last,First);
      }
      imgBox.style.left=-width*n+"px";
      animate(imgBox,{left:0},600)
    }
    right.onclick=function(){//点击右边的按钮，图片切换
      move();
    }
  }
  var obj=$(".lunbo");
  for(var i=0;i<obj.length;i++){
    nodeLunbo(obj[i]);
  }

 调用方法

  nodeLunbo(obj,left,right,imgBox,imgone);