jquery插件实现轮播图效果
更新时间：2021年04月27日 08:46:01 作者：阿飞超努力
这篇文章主要为大家详细介绍了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%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>再做轮播图</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/zzlbt.js"></script>
<link href="css/zzlbt.css" rel="stylesheet" type="text/css" />
<style>
*{
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;
}
</style>
</head>
<body>
<div class="div"></div>
<div class="div"></div>
</body>
</html>
<script>
$(function(){
$(".div").lbt({
data:[
"img/1.png",
"img/2.png",
"img/3.png",
"img/4.png"
]
})
})
</script>
$.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 class='img' src='"+item+"' />");
$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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据，本文给大家简单介绍jsonp 使用小结 ，需要的朋友参考下2016-01-01
这篇文章主要为大家详细介绍了jQuery实现图片切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要介绍了jQuery简单实现遍历数组的方法,涉及jQuery遍历数组的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
今天小编就为大家分享一篇jquery获取元素到屏幕四周可视距离的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
使用JQuery实现页面的表格数据的增加与分页，具体示例如下，喜欢的朋友可以参考下2013-12-12
本篇文章主要介绍了jQuery tip提示插件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
这篇文章主要为大家详细介绍了jQuery实现简单弹幕制作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
jquery下jstree简单应用，学习jstree的朋友可以参考下。2011-04-04
这篇文章主要介绍了jQuery获取某天的农历日期并判断是否除夕或新年的方法,涉及jQuery针对日期与时间的相关操作技巧,需要的朋友可以参考下2016-03-03
这篇文章主要给大家介绍了关于利用jquery如何从json中读取数据追加到html中的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编一起来看看吧。2017-12-12
最新评论