每天一个Jquery插件-jquery插件实现轮播图，供大家参考，具体内容如下 效果如下 代码部分 .rel{ white-space:nowrap; overflow-y
每天一个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;
}--结束END--
本文标题: jquery插件实现轮播图效果
本文链接: https://lsjlt.com/news/124659.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0