Example code for implementing stacked carousel effect with HTML+CSS+JS
|
Effect:
<body>
<div class="smallBox">
<div class="arrowLeft">←</div>
<div class="smallPicBox"> //Use a div to store a ul, and set the initial style for each li in the ul<ul>
<li id="li1" style="position: absolute;top:calc(50% - 200px);left: 0px;z-index:1;background-color: aqua;transform: scale(0.5);transition: 0.3s;opacity: 0.5;background-image: url(./images/01.jpg);background-size: cover;"></li>
<li id="li2" style="position: absolute;top:calc(50% - 200px);left: 150px; z-index:2;background-color: red;transform: scale(0.7); transition: 0.3s;opacity: 0.7;background-image: url(./images/02.jpg);background-size: cover;"></li>
<li id="li3" style="position: absolute;top:calc(50% - 200px);left: 300px; z-index:3;background-color: blue;transform: scale(0.9); transition: 0.3s;opacity: 0.9;background-image: url(./images/03.jpg);background-size: cover;"></li>
<li id="li4" style="position: absolute;top:calc(50% - 200px);left: 450px; z-index:4;background-color: green;transform: scale(1); transition: 0.3s;opacity: 1;background-image: url(./images/04.jpg);background-size: cover;"></li>
<li id="li5" style="position: absolute;top:calc(50% - 200px);left: 600px; z-index:3;background-color: yellow;transform: scale(0.9); transition: 0.3s;opacity: 0.9;background-image: url(./images/05.jpg);background-size: cover;"></li>
<li id="li6" style="position: absolute;top:calc(50% - 200px);left: 750px; z-index:2;background-color: gray;transform: scale(0.7); transition: 0.3s;opacity: 0.7;background-image: url(./images/06.jpg);background-size: cover;"></li>
<li id="li7" style="position: absolute;top:calc(50% - 200px);left: 900px; z-index:1;background-color: deeppink;transform: scale(0.5); transition: 0.3s;opacity: 0.5;background-image: url(./images/07.jpg);background-size: cover;"></li>
</ul>
</div>
<div class="arrowRight">→</div>
</div>
</div>
</body>CSS code:
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.albumBox{
width: 1200px;
height: 400px;
margin: 0 auto;
border: 1px solid #000;
}
.smallBox{
height: 400px;
line-height: 400px;
position: relative;
}
.smallPicBox{
width: 1100px;
height: 400px;
float: left;
position: relative;
}
.smallPicBox ul{
width: 100%;
height: 400px;
}
.smallPicBox li{
width: 320px;
height: 400px;
float: left;
border: 1px solid #000;
box-sizing: border-box;
}
.smallBox .current::after{
content: "\25b2";
position: absolute;
top: -31px;
left: 70px;
color: red;
}
.arrowLeft{
width: 50px;
height: 400px;
position: absolute;
left: 0;
border: 1px solid #000;
box-sizing: border-box;
background-color: gray;
z-index: 10;
}
.arrowRight{
width: 50px;
height: 400px;
position: absolute;
right: 0;
border: 1px solid #000;
box-sizing: border-box;
background-color: gray;
z-index: 10;
}
</style>JS code:
<script>
var arrowLeft = document.querySelector(".arrowLeft")
var arrowRight = document.querySelector(".arrowRight")
var ul = document.querySelector(".smallPicBox ul")
var li = document.querySelectorAll(".smallPicBox li")
var timerId = 0
arrowLeft.onclick=function(){ //Left arrow click event li=document.getElementsByTagName('li')
ul.appendChild(li[0]) //Cut the 0th child element of ul to the end to achieve seamless carousel posi(li) //Modify the properties of each li}
arrowRight.onclick=function(){ //right arrow click event li=document.getElementsByTagName('li') //get li again
ul.insertBefore(li[6],li[0]) //Cut the last child element of ul to the front to achieve seamless carousel posi(li) //Modify the properties of each li}
function posi(li){ //Modify li attribute function var n1=0
for(var x=0;x<li.length;x++){ //Modify position li[x].style.left=n1+'px'
n1=n1+150
}
for(var i=0;i<li.length/2;i++){ //Modify the level li[i].style.zIndex=i+1
li[li.length-1-i].style.zIndex=i+1
}
li[3].style.zIndex='4'
var n2=0.3
for(var j=0;j<li.length/2;j++){ //Scaling n2=parseFloat(n2+0.2)
li[j].style.transform='scale('+n2+')'
li[li.length-1-j].style.transform='scale('+n2+')'
}
li[3].style.transform = 'scale(1)'
var n3=0.3
for(var k=0;k<li.length/2;k++){ //Modify transparency n3=parseFloat(n3+0.2)
li[k].style.opacity=n3
li[li.length-1-k].style.opacity=n3
}
li[3].style.opacity='1'
}
//Mouse in and out temerId=setInterval(function(){
arrowLeft.click()
}, 1000);
arrowLeft.onmouseover=function(){
clearInterval(timerId)
}
arrowLeft.onmouseout=function(){
timerId = setInterval(function(){
arrowLeft.click()
}, 1000);
}
arrowRight.onmouseover=function(){
clearInterval(timerId)
}
arrowRight.onmouseout=function(){
timerId = setInterval(function(){
arrowLeft.click()
}, 1000);
}
</script>Note: In this example, js is written directly in the body. You can also write a separate js file and introduce it into the html interface Effect picture:
This concludes this article about sample code for implementing stacked carousel effects with HTML+CSS+JS. For more information on implementing carousel with HTML+CSS+JS, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future! |
<<: Detailed operations of building RabbitMq's common cluster and mirror cluster with Docker
Recommend
An example of implementing a simple finger click animation with CSS3 Animation
This article mainly introduces an example of impl...
Implementation of dynamic rem for mobile layout
Dynamic rem 1. First, let’s introduce the current...
Detailed explanation of common MySQL operation commands in Linux terminal
Serve: # chkconfig --list List all system service...
Detailed explanation of the use of DockerHub image repository
Previously, the images we used were all pulled fr...
How to modify the previous command when an input error occurs in the MySQL command prompt
Table of contents Current Issues Solution process...
Docker image analysis tool dive principle analysis
Today I recommend such an open source tool for ex...
Detailed explanation of Tomcat's Server Options
1. Configuration By default, the first two are no...
Detailed explanation of the application of CSS Sprite
CSS Sprite, also known as CSS Sprite, is an image...
Pitfalls encountered when installing MySQL 8.0.18 compressed package and resetting forgotten passwords
http://www.cppcns.com/shujuku/mysql/283231.html Y...
How to use CURRENT_TIMESTAMP in MySQL
Table of contents Use of CURRENT_TIMESTAMP timest...
What are the new CSS :where and :is pseudo-class functions?
What are :is and :where? :is() and :where() are p...
How to decompress multiple files using the unzip command in Linux
Solution to the problem that there is no unzip co...
Solve the problem of running hello-world after docker installation
Installed Docker V1.13.1 on centos7.3 using yum B...
Stop using absolute equality operators everywhere in JS
Table of contents Overview 1. Test for null value...
html a link tag title attribute line break mouse hover prompt content line break effect
The method of wrapping the content (title attribut...