jquery插件實現(xiàn)輪播圖效果
更新時間：2021年04月27日 08:46:01 作者：阿飛超努力
這篇文章主要為大家詳細(xì)介紹了jquery插件實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
每天一個jquery插件-jquery插件實現(xiàn)輪播圖，供大家參考，具體內(nèi)容如下
效果如下
代碼部分
.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);
})
//執(zhí)行輪播
var index = 0;
var timer = setInterval(function(){
$item.stop().animate({
'scrollLeft':$item.width()*index+'px'
},500)
index = (index+1)%obj.data.length;
},obj.time)
//一些基本事件，當(dāng)鼠標(biāo)懸浮暫停輪播與下面的軸
})
})
}
$.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;
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網(wǎng)頁從別的域名（網(wǎng)站）那獲取資料，即跨域讀取數(shù)據(jù)，本文給大家簡單介紹jsonp 使用小結(jié) ，需要的朋友參考下2016-01-01
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)圖片切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了jQuery簡單實現(xiàn)遍歷數(shù)組的方法,涉及jQuery遍歷數(shù)組的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
今天小編就為大家分享一篇jquery獲取元素到屏幕四周可視距離的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
JQuery頁面的表格數(shù)據(jù)的增加與分頁的實現(xiàn)
使用JQuery實現(xiàn)頁面的表格數(shù)據(jù)的增加與分頁，具體示例如下，喜歡的朋友可以參考下2013-12-12
本篇文章主要介紹了jQuery tip提示插件的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)簡單彈幕制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
jquery下jstree簡單應(yīng)用 - v1.0
jquery下jstree簡單應(yīng)用，學(xué)習(xí)jstree的朋友可以參考下。2011-04-04
jQuery獲取某天的農(nóng)歷日期并判斷是否除夕或新年的方法
這篇文章主要介紹了jQuery獲取某天的農(nóng)歷日期并判斷是否除夕或新年的方法,涉及jQuery針對日期與時間的相關(guān)操作技巧,需要的朋友可以參考下2016-03-03
利用jquery如何從json中讀取數(shù)據(jù)追加到html中
這篇文章主要給大家介紹了關(guān)于利用jquery如何從json中讀取數(shù)據(jù)追加到html中的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編一起來看看吧。2017-12-12