, as shown in the figure are two side arrow pictures.
Pure HTML and CSS to achieve JD carousel effect
|
The JD carousel was implemented using pure HTML and CSS, without adding dynamic effects, and mainly using positioning knowledge.
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<title>LunBo</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
.lunbo{
margin: 40px auto;
height: 470px;
width: 590px;
position: relative;
}
.left,.right{
position: absolute;
top: 50%;
margin-top: -18px;
width: 24px;
height: 36px;
}
.left{
left: 0;
}
.right{
right: 0;
}
.lunbo ul{
height: 18px;
width: 151px;
background: rgba(255,255,255,.3);
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -76px;
border-radius: 10px;
}
.lunbo li{
height: 14px;
width: 14px;
border-radius: 50%;
background-color: #fff;
float: left;
margin: 2px;
}
.lunbo .current{
background-color: #f40;
}
</style>
</head>
<body>
<div class="lunbo">
<img src="images/lunbo.jpg" alt="">
<div class="left"><img src="images/left.png" alt=""></div>
<!-- You can also use a link and then use background -->
<div class="right"><img src="images/right.png" alt=""></div>
<ul>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>The following effects were achieved
Summarize The above is the pure HTML and CSS to achieve the JD carousel effect introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: The unreasonable MaxIdleConns of MySQL will cause short connections
>>: Five practical tips for web form design
Recommend
How to prevent iframe from jumping to the page in HTML and use iframe to embed WeChat web version in the page
I just want to make a small thing that combines w...
Solve the problem of HTML automatic formatting after saving in vscode
The version of vsCode has been updated in recent ...
Professional MySQL development design specifications and SQL writing specifications
In the process of team development, it is essenti...
WeChat applet custom menu navigation to achieve staircase effect
Design Intentions When developing a page, you oft...
Problems and solutions of error 08001 when linking to MySQL in IDEA and no table display after successful connection
Error: Connection to blog0@localhost failed. [080...
Detailed explanation of Alibaba Cloud security rule configuration
Two days ago, I took advantage of the Double 11 s...
An example of using Lvs+Nginx cluster to build a high-concurrency architecture
Table of contents 1. Lvs Introduction 2. Lvs load...
A brief discussion on whether CSS will block page rendering
Maybe everyone knows that js execution will block...
Learn javascript iterator
Table of contents Introduction What does an itera...
How to manually encapsulate paging components in Vue3.0
This article shares the specific code of the vue3...
A Deep Dive into JavaScript Promises
Table of contents 1. What is Promise? 2. Why is t...
Use of Docker image storage overlayfs
1. Overview The image in Docker is designed in la...
Vue's global watermark implementation example
Table of contents 1. Create a watermark Js file 2...
Introduction to Apache deployment of https in cryptography
Table of contents Purpose Experimental environmen...
Keepalived+Nginx+Tomcat sample code to implement high-availability Web cluster
Keepalived+Nginx+Tomcat to achieve high availabil...