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
Vue implements infinite loading waterfall flow
This article example shares the specific code of ...
mySQL server connection, disconnection and cmd operation
Use the mysql command to connect to the MySQL ser...
Summary of Form Design Techniques in Web Design
“Inputs should be divided into logical groups so ...
How to quickly build a static website on Alibaba Cloud
Preface: As a junior programmer, I dream of build...
Detailed process of installing nginx1.9.1 on centos8
1.17.9 More delicious, really Nginx download addr...
B2C website user experience detail design reference
Recently, when using Apple.com/Ebay.com/Amazon.co...
HTML+jQuery to implement a simple login page
Table of contents Introduction Public code (backe...
Encapsulate the navigation bar component with Vue
Preface: Fully encapsulating a functional module ...
XHTML Getting Started Tutorial: What is XHTML?
What is HTML? To put it simply: HTML is used to m...
Docker cross-server communication overlay solution (Part 1) Consul single instance
Table of contents Scenario Task idea analyze Conc...
Example of how to implement keepalived+nginx high availability
1. Introduction to keepalived Keepalived was orig...
The visual design path of the website should conform to user habits
Cooper talked about the user's visual path, w...
React's component collaborative use implementation
Table of contents Nesting Parent-child component ...
Detailed explanation of MySQL database tens of millions of data query and storage
Table of contents Million-level data processing s...
Front-end implementation of GBK and GB2312 encoding and decoding of strings (summary)
Preface When developing a project, I encountered ...