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:
|
<<: How to upload and download files between Linux server and Windows system
>>: mysql workbench installation and configuration tutorial under centOS
Recommend
Solution to JS out-of-precision number problem
The most understandable explanation of the accura...
CSS3 implements horizontal centering, vertical centering, horizontal and vertical centering example code
As a front-end monkey, whether it is during an in...
Implementing image fragmentation loading function based on HTML code
Today we will implement a fragmented image loadin...
Detailed explanation of the significance of standard commit msg in JavaScript development
Table of contents The significance of standard co...
Pure CSS to achieve the list pull-down effect in the page
You may often see the following effect: That’s ri...
Docker uses CMD or ENTRYPOINT commands to start multiple services at the same time
Requirement: Celery is introduced in Django. When...
Vue implements adding watermark effect to the page
Recently, when I was working on a project, I was ...
Sample code for implementing PC resolution adaptation in Vue
Table of contents plan Install Dependencies Intro...
Implementation process of row_number in MySQL
1. Background Generally, in a data warehouse envi...
Detailed explanation of CocosCreator project structure mechanism
Table of contents 1. Project folder structure 1. ...
Responsive Web Design Learning (1) - Determining the screen size and percentage usage
Nowadays, mobile devices are becoming more and mo...
How to install ROS Noetic in Ubuntu 20.04
Disclaimer: Since the project requires the use of...
Tutorial on logging into MySQL after installing Mysql 5.7.17
The installation of mysql-5.7.17 is introduced be...
An article to understand the usage of typeof in js
Table of contents Base Return Type String and Boo...
mysql installer community 8.0.16.0 installation and configuration graphic tutorial
mysql installer community 8.0.16.0 installation g...