jQuery implements a simple carousel effect
|
Hello everyone, today I will share with you the implementation of the carousel. Here is the effect of the carousel I made.
First we see that it is composed of a background image, a directional icon, and an indicator. We found that the background image, directional icons, and indicators are stacked together, so we have to use absolute positioning when laying them out. We want to achieve that when the direction icon is clicked, the image changes accordingly; when the indicator is clicked, the image changes accordingly; when not clicked, it automatically plays every 5 seconds; when not clicked, the direction icon does not appear. Structural layout: Use one div to wrap three divs, and the three divs inside display the background image part, the direction icon part and the indicator part respectively.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./css/lunbotu.css" >
</head>
<body>
<!--The entire slideshow section-->
<div class="carousel">
<!--Image background-->
<div class="content">
<ul>
<li><a href=""><img src=" ./img/dj.jpg" alt=""></a></li>
<li><a href=""><img src=" ./img/ali.jpg" alt=""></a></li>
<li><a href=""><img src=" ./img/al.jpg" alt=""></a></li>
<li><a href=""><img src=" ./img/hml.jpg" alt=""></a></li>
<li><a href=""><img src=" ./img/yao.jpg" alt=""></a></li>
<li><a href=""><img src=" ./img/xia.jpg" alt=""></a></li>
</ul>
</div>
<!--Left and right move icons-->
<div class="pos">
<a href="" class=" left"><img src="./img/arrow-left.png" alt=""></a>
<a href="" class=" right"><img src="./img/arrow-right.png" alt=""></a>
</div>
<!--Indicator-->
<div class="dot">
<ul>
<li class="active"><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</div>
<script src="js/jquery-3.6.0.js"></script>
<script src="js/lunbotu.js"></script>
</body>
</html>Style code: You can design your own favorite color and style. Note that when using absolute positioning you must follow the principle of the son being the same as the father. If you want to display only one image on the interface, you can use overflow: hidden; to hide the excess part. After positioning, you can set top: 50%; transform: translateY(-50%); vertical center display: none;
/*Remove the style that comes with the tag*/
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
width: 100%;
}
/*Set the layout of the entire carousel*/
.carousel {
position: relative;
margin: 40px auto;
width: 1000px;
height: 460px;
border: 1px solid rgba(0, 0, 0, 0.1);
box-sizing: border-box;
/*Hide the excess part*/
overflow: hidden;
}
/*Set the layout of the background image*/
.content {
position: absolute;
z-index: 1;
}
/*Set the layout of the left and right icons and indicators*/
.pos,
.dot {
position: absolute;
z-index: 2;
width: 100%;
}
/*Set the left and right move icons to be vertically centered first and not displayed*/
.pos {
top: 50%;
transform: translateY(-50%);
display: none;
}
/*Set the background of the left and right icons*/
.pos > a {
padding: 10px 0;
border-radius: 15px;
background: rgba(0, 0, 0, 0.5);
}
/*Set the position of the left move icon*/
.left {
float: left;
}
/*Set the position of the right move icon*/
.right {
float: right;
}
/*Set the position of the indicator display*/
.dot {
bottom: 30px;
text-align: center;
}
/*Set the indicator background*/
.dot ul {
display: inline-block;
padding: 2px;
background: rgba(0, 0, 0, .2);
border-radius: 15px;
}
/*Set the size of the dot*/
.dot > ul > li {
float: left;
margin: 5px;
width: 10px;
height: 10px;
border-radius: 50%;
background: white;
cursor: pointer;
}
/*Set the position of the indicator when displaying the current picture*/
.active {
background: rgba(255, 255, 255, .6) !important;
}JavaScript code: Note that the images should be hidden at the beginning, and the first image will be displayed by default. Otherwise, no matter which image you click first, it will be the second image. When displaying the next picture, the mark of the previous picture and the indicator should be cleared
$(function () {
/*Save the index of the current image*/
let index = 0;
let btn = false;
/*Remove the refresh function of tag a*/
$('a[href=""]').prop('href', 'javascript:;');
/*Hide the pictures first and display the first picture by default*/
$('.content>ul>li').hide();
$('.content>ul>li:eq(0)').show();
// Set the direction arrow icon to fade in and out $('.carousel').hover(function () {
$('.pos').stop().fadeIn()
}, function () {
$('.pos').stop().fadeOut()
})
// Bind click event to left direction icon $('.left').on('click', function () {
btn = true;
clean();
if (index == 0) {
index = 5;
} else {
--index;
}
show();
})
// Bind click event to right direction icon $('.right').on('click', function () {
btn = true;
clean();
if (index == 5) {
index = 0;
} else {
++index;
}
show();
})
//Indicator indication function (bind click event to the indicator)
$('.dot li').on('click', function () {
btn = true;
let now = $(this).index()
if (now != index) {
clean();
index = now;
show();
}
})
//Automatic play function (timer)
setInterval(function () {
if (!btn) {
clean();
if (index == 5) {
index = 0;
} else {
++index;
}
show();
} else {
btn = false;
}
}, 5000)
//Clear the previous image and the indicator function clean() {
$(`.content>ul>li:eq(${index})`).stop().fadeOut();
$(`.dot>ul>li:eq(${index})`).removeClass('active');
}
//Add new pictures and indicators on the indicator function show() {
console.log(index);
$(`.content>ul>li:eq(${index})`).stop().fadeIn();
console.log($(`.content>ul>li:eq(${index})`))
$(`.dot>ul>li:eq(${index})`).addClass('active');
}
})result:
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:
|
<<: MySQL multi-table query detailed explanation
>>: Detailed installation history of Ubuntu 20.04 LTS
Recommend
Detailed explanation of commands to view linux files
How to view linux files Command to view file cont...
How to solve the problem "Unknown column 'password" when resetting MySQL root password
When I turned on my MAC at night, I found that th...
About ROS2 installation and docker environment usage
Table of contents Why use Docker? Docker installa...
How to implement HTML Table blank cell completion
When I first taught myself web development, there...
Vue implements mobile phone verification code login
This article shares the specific code of Vue to i...
Native JavaScript carousel implementation method
This article shares the implementation method of ...
Layui implements the login interface verification code
This article example shares the specific code of ...
Zabbix monitoring docker application configuration
The application of containers is becoming more an...
MySQL Database Indexes and Transactions
Table of contents 1. Index 1.1 Concept 1.2 Functi...
Detailed steps for installing MySQL using cluster rpm
Install MySQL database a) Download the MySQL sour...
Problems with index and FROM_UNIXTIME in mysql
Zero, Background I received a lot of alerts this ...
Solve the problem of MySql8.0 checking transaction isolation level error
Table of contents MySql8.0 View transaction isola...
CSS screen size adaptive implementation example
To achieve CSS screen size adaptation, we must fi...
CSS to achieve the like card effect in the lower right corner of the web page (example code)
Effect To implement HTML, first prepare a clean H...
Detailed explanation of the visualization component using Vue to compare the differences between two sets of data
Table of contents need: Main points: According to...