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);
   })
   //執(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)
   //一些基本事件，當鼠標懸浮暫停輪播與下面的軸
  })
  
 })
}
$.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;
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: