jquery插件实现轮播图效果

这篇文章主要为大家详细介绍了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%; }

    *{ margin: 0px; padding: 0px; } #div{ position: fixed; top: 20px; left: 20px; width: 400px; height: 200px; border: 1px solid lightgray; } .div{ width: 400px; height: 200px; float: left; margin: 10px; }  

 $.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; }

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

以上就是jquery插件实现轮播图效果的详细内容，更多请关注本站其它相关文章！