jquery插件实现轮播图效果

每天一个jquery插件-jquery插件实现轮播图，供大家参考，具体内容如下

效果如下

代码部分

.rel{
 white-space:nowrap;
 overflow-y: hidden;
 overflow-x: auto;
}
.rel::-webkit-scrollbar{
 height: 0px;
 width: 0px;
}
.img{
 width: 100%;
 height: 100%;
}

$.prototype.lbt = function(obj) {
 obj = obj == undefined ? {} : obj;
 obj.time = obj.time==undefined?1000:obj.time;
 var that = this;
 var $that = $(this);
 $that.arr().forEach($item=>{
  $item.addClass("rel");
  $(function(){
   //添加dom
   obj.data.forEach(item=>{
    var $img = $("");
    $img.appendTo($item);
   })
   //执行轮播
   var index = 0;
   var timer = setInterval(function(){
    $item.stop().animate({
     'scrollLeft':$item.width()*index+'px'
    },500)
    index = (index+1)%obj.data.length;
   },obj.time)
   //一些基本事件，当鼠标悬浮暂停轮播与下面的轴
  })
  
 })
}
$.prototype.arr = function() {
 var that = this;
 var arr = [];
 for (var i = 0; i < that.length; i++) {
  var $dom = $(that[i]);
  arr.push($dom);
 }
 return arr;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。