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
Detailed process of compiling and installing Storm on Kylin V10 server
1 Introduction Apache Storm is a free, open sourc...
Detailed explanation of using Nginx reverse proxy to solve cross-domain problems
question In the previous article about cross-doma...
Reasons and solutions for being unable to remotely connect to MySQL database under CentOS7
Preface I recently encountered a problem at work....
VMware kali virtual machine environment configuration method
1|0 Compile the kernel (1) Run the uname -r comma...
A brief talk on responsive design
1. What is responsive design? Responsive design i...
CSS to achieve pop-up window up and down center left and right and transparent background lock window effect
There is a simple CSS method to realize the pop-u...
A brief analysis of React Native startReactApplication method
In this article, we sorted out the startup proces...
Solution to inconsistent display of cursor size in input box
The cursor size in the input box is inconsistent T...
A brief analysis of using coredump technology to trace the cause of process crashes in Linux
Recently, a problem occurred in the project. The ...
js to achieve 3D carousel effect
This article shares the specific code for impleme...
Echarts Basic Introduction: General Configuration of Bar Chart and Line Chart
1Basic steps of echarts Four Steps 1 Find the DOM...
Sample code for implementing login and registration template in Vue
Template 1: login.vue <template> <p clas...
Example verification MySQL | update field with the same value will record binlog
1. Introduction A few days ago, a development col...
Nest.js hashing and encryption example detailed explanation
0x0 Introduction First of all, what is a hash alg...
WeChat applet custom scroll-view example code
Mini Program Custom Scroll-View Scroll Bar Withou...