jQuery plugin to achieve carousel effect

A jQuery plugin every day - jQuery plugin to implement a carousel chart, for your reference, the specific content is as follows

The effect is as follows

Code section

.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>Make another carousel</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(){
   //Add dom
   obj.data.forEach(item=>{
    var $img = $("<img class='img' src='"+item+"' />");
    $img.appendTo($item);
   })
   //Execute the carousel var index = 0;
   var timer = setInterval(function(){
    $item.stop().animate({
     'scrollLeft':$item.width()*index+'px'
    },500)
    index = (index+1)%obj.data.length;
   },obj.time)
   //Some basic events, when the mouse hovers, the carousel and the axis below are paused})
  
 })
}
$.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;
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

jQuery implements carousel map detailed explanation and example code
Using jQuery to write left and right carousel effects
jQuery implements seamless left and right carousel
jQuery plugin slides to achieve seamless carousel effects
jQuery implements carousel chart and its principle detailed explanation
jQuery adaptive carousel plug-in Swiper usage example
jQuery implements left and right sliding carousel
JQuery and html+css to achieve a carousel with small dots and left and right buttons
Simple carousel function implemented by jQuery [suitable for beginners]

<<: How to upload and download files between Linux server and Windows system

>>: mysql workbench installation and configuration tutorial under centOS