jquery插件实现轮播图效果

您所在的位置：网站首页 › jquery轮播图代码 › jquery插件实现轮播图效果

jquery插件实现轮播图效果

2023-03-10 03:07| 来源: 网络整理| 查看: 265

每天一个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 &＃63; {} : obj; obj.time = obj.time==undefined&＃63;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

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

【本文地址】

jquery插件实现轮播图效果

jquery插件实现轮播图效果

今日新闻

推荐新闻