jquery插件實(shí)現(xiàn)輪播圖效果
更新時(shí)間：2021年04月27日 08:46:01 作者：阿飛超努力
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
每天一個(gè)jquery插件-jquery插件實(shí)現(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;
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jquery實(shí)現(xiàn)無(wú)縫輪播圖
- jQuery呼吸輪播圖制作原理詳解
- jQuery實(shí)現(xiàn)呼吸輪播圖
- jQuery實(shí)現(xiàn)簡(jiǎn)單的輪播圖效果
- 用jquery實(shí)現(xiàn)輪播圖效果
- JS+JQuery實(shí)現(xiàn)無(wú)縫連接輪播圖
- Swiper如何實(shí)現(xiàn)兩行四列輪播圖效果實(shí)例
- bootstrap實(shí)現(xiàn)輪播圖效果
- Bootstrap實(shí)現(xiàn)基于carousel.js框架的輪播圖效果
- jQuery實(shí)現(xiàn)的超簡(jiǎn)單輪播圖功能示例【代碼解釋】
相關(guān)文章
延遲執(zhí)行在某些特殊的情況下還是蠻有用的，實(shí)現(xiàn)的方法也很簡(jiǎn)單，本文有個(gè)不錯(cuò)的示例，有需要的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
jQuery實(shí)現(xiàn)電梯導(dǎo)航案例詳解(切換?網(wǎng)頁(yè)區(qū)域)
日常生活中用手機(jī)，電腦瀏覽網(wǎng)頁(yè)時(shí)，滑到了頁(yè)面下端后想返回頂部 或 跳轉(zhuǎn)到頁(yè)面別的版塊，用鼠標(biāo)滾動(dòng)很麻煩，網(wǎng)頁(yè)電梯導(dǎo)航就可以很方便的精準(zhǔn)到達(dá)目標(biāo)版塊，本文給大家分享jquery電梯導(dǎo)航案例詳解，感興趣的朋友一起看看吧2022-05-05
通過(guò)最終效果發(fā)現(xiàn)，當(dāng)頭像處于最前面時(shí)，圖像最大，透明低。越往后頭像就越小，就越透明2011-12-12
今天抽時(shí)間給大家整理jquery和ajax的相關(guān)知識(shí)
jquery ajax2015-11-11
jquery實(shí)現(xiàn)Li滾動(dòng)時(shí)滾動(dòng)條自動(dòng)添加樣式的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)Li滾動(dòng)時(shí)滾動(dòng)條自動(dòng)添加樣式的方法,實(shí)例分析了jquery響應(yīng)鼠標(biāo)事件及動(dòng)態(tài)添加樣式的相關(guān)技巧,需要的朋友可以參考下2015-08-08
本文主要介紹了jquery手勢(shì)密碼插件的相關(guān)知識(shí)，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-03-03
sliderToggle在寫(xiě)jquery的計(jì)時(shí)器setTimeouter中不生效
sliderToggle在setTimeouter中不生效，還報(bào)錯(cuò)說(shuō)是發(fā)生了意想不到的錯(cuò)誤2014-05-05
jQuery插件HighCharts繪制2D金字塔圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D金字塔圖效果,結(jié)合實(shí)例形式分析了jQuery使用HighCharts插件繪制金字塔圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jquery實(shí)現(xiàn)兩邊飄浮可關(guān)閉的對(duì)聯(lián)廣告
可關(guān)閉的左右兩邊漂浮的對(duì)聯(lián)廣告代碼jquery特效，寬屏分辨率大于1024px才顯示，當(dāng)用戶(hù)點(diǎn)擊關(guān)閉按鈕可以單獨(dú)關(guān)閉自己一邊的漂浮的對(duì)聯(lián)廣告代碼，juqery對(duì)聯(lián)廣告效果感興趣的朋友一起學(xué)習(xí)吧2015-11-11