3 simple ways to achieve carousel effects with JS
|
This article shares 3 methods to achieve the specific code of JS carousel effect for your reference. The specific content is as follows Js implements carousel image 01Implementation ideas This may be one of the simplest implementations of a carousel. This effect is achieved by changing the src of the image. First, you need to unify the image naming format, such as pic01.jpg, pic02.jpg..., and then use js to use a timer to change the name of the src image link in the img tag to achieve the switching effect. The code is as follows: Achieve results
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carousel Implementation 01</title>
<style type="text/css">
.lunbo{
width: 900px;
height: 400px;
margin:100px auto;
}
.lunbo img{
width: 100%;
height:100%;
}
</style>
</head>
<body>
<!--Slideshow Module-->
<div class="lunbo">
<img id="lunbo_img" src="./pic/img3.jpeg" >
</div>
<!-- JS code -->
<script>
var index = 1;
function lunbo(){
index ++ ;
// Check if index is greater than 3
if(index > 3){
index = 1;
}
//Get the img object var img = document.getElementById("lunbo_img");
img.src = "./pic/img"+index+".jpeg";
}
//2. Define timer setInterval(lunbo,2000);
/*Remember that you cannot add(), setInterval(lunbo,2000) when calling the lunbo method in the timer; if you add(), the lunbo() method will be executed, making the timer useless.
</script>
</body>
</html>Js realizes carousel picture 02Implementation ideas This may be one of the simplest implementations of a carousel. This effect is achieved by changing the background image link. First, you need to unify the image naming format, such as pic01.jpg, pic02.jpg..., and then use js to use a timer to change the name of the url() image link in the background attribute to achieve the switching effect. The code is as follows: Achieve results
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carousel Implementation 02</title>
<style>
body{
margin: 0;
padding: 0;
}
.lunbo{
width:100%;
height:720px;
background-image: url(pic/img1.jpeg);/*background image*/
background-size:100% 100%;
}
</style>
</head>
<body>
<div class="lunbo">
</div>
<script type="text/javascript">
var index = 1;
function lunbo(){
index ++ ;
// Check if number is greater than 3
if(index > 3){
index = 1;
}
//Get the img object var img = document.getElementsByClassName("lunbo")[0];
img.style.background = "url(pic/img"+index+".jpeg)";
img.style.backgroundSize="100% 100%";
}
//2. Define timer setInterval(lunbo,3000);
</script>
</body>
</html>Js implements carousel image 03To implement this carousel, first use CSS code to set the opacity attribute of all li tags that store images to 0 to hide them. Use js code to use a timer to continuously call the class active to highlight the li tags, while hiding the brother li tags. Then use index++ to achieve the effect of switching the cyclic display. When the buttons on both sides are clicked, the method where index++ is located is called to achieve the switching effect. There is no complicated algorithm. You can learn it by looking at the code with a little bit of basic knowledge. Please refer to it. Achieve results
HTML Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,
minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!--Introduce CSS code-->
<link rel="stylesheet" type="text/css" href="./css/index.css" />
<!--Introduce Js code-->
<script src="./js/index.js"></script>
<title>Js implements carousel image</title>
</head>
<body>
<div class="lunbo">
<div class="content">
<ul id="item">
<li class="item">
<a href="#" ><img src="img/pic1.jpg" ></a>
</li>
<li class="item">
<a href="#" ><img src="img/pic2.jpg" ></a>
</li>
<li class="item">
<a href="#" ><img src="img/pic3.jpg" ></a>
</li>
<li class="item">
<a href="#" ><img src="img/pic4.jpg" ></a>
</li>
<li class="item">
<a href="#" ><img src="img/pic5.jpg" ></a>
</li>
</ul>
<div id="btn-left"><</div>
<div id="btn-right">></div>
<ul id="circle">
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
</ul>
</div>
</div>
</body>
</html>CSS Code
*{
margin: 0;
padding: 0;
}
a{
list-style: none;
}
li{
list-style: none;
}
.lunbo{
width: 100%;
}
.content{
width: 800px;
height: 300px;
margin: 20px auto;
position: relative;
}
#item{
width: 100%;
height: 100%;
}
.item{
position: absolute;
opacity: 0;
transition: all 1s;
}
.item.active{
opacity:1;
}
img{
width: 100%;
}
#btn-left{
width: 30px;
height: 69px;
font-size: 30px;
color: white;
background-color:rgba(0,0,0,0.4);
line-height: 69px;
padding-left:5px;
z-index: 10;/*Always displayed on top of the image*/
position: absolute;
left: 0;
top: 50%;
transform: translateY(-60%);/*Offset the button upward and center it*/
cursor: pointer;
opacity: 0;/*Usually hidden*/
}
.lunbo:hover #btn-left{
/*Mouse over, icon displayed*/
opacity: 1;
}
#btn-right{
width: 26px;
height: 69px;
font-size: 30px;
color: white;
background-color:rgba(0,0,0,0.4);
line-height: 69px;
padding-left: 5px;
z-index: 10;
position: absolute;
right: 0;
top: 50%;
cursor: pointer;
opacity: 0;
transform: translateY(-60%);
}
.lunbo:hover #btn-right{
opacity: 1;
}
#circle{
height: 20px;
display: flex;
position: absolute;
bottom: 35px;
right: 25px;
}
.circle{
width: 10px;
height: 10px;
border-radius: 10px;
border: 2px solid white;
background: rgba(0,0,0,0.4);
cursor: pointer;
margin: 5px;
}
.white{
background-color: #FFFFFF;
}JS code
window.onload = function(){
var items = document.getElementsByClassName("item");
var circles = document.getElementsByClassName("circle");
var leftBtn = document.getElementById("btn-left");
var rightBtn = document.getElementById("btn-right");
var content = document.querySelector('.content');
var index=0;
var timer = null;
//Clear class
var clearclass = function(){
for(let i=0;i<items.length;i++){
items[i].className="item";
circles[i].className="circle";
circles[i].setAttribute("num",i);
}
}
/*Only show one class*/
function move(){
clearclass();
items[index].className="item active";
circles[index].className="circle white";
}
//Click the button on the right to switch to the next picture rightBtn.onclick=function(){
if(index<items.length-1){
index++;
}
else{
index=0;
}
move();
}
//Click the button on the left to switch to the previous picture leftBtn.onclick=function(){
if(index<items.length){
index--;
}
else{
index=items.length-1;
}
move();
}
//Start the timer, click the button on the right to realize the carousel timer=setInterval(function(){
rightBtn.onclick();
},1500)
//When clicking a dot, jump to the corresponding picture for(var i=0;i<circles.length;i++){
circles[i].addEventListener("click",function(){
var point_index = this.getAttribute("num");
index=point_index;
move();
})
}
//Move the mouse to clear the timer and start a three-second timer to slowly rotate content.onmouseover=function(){
clearInterval(timer);
timer = setInterval(function(){
rightBtn.onclick();
},3000)
}
//Move the mouse out and start the timer content.onmouseleave=function(){
clearInterval(timer);
timer = setInterval(function(){
rightBtn.onclick();
},1500)
}
}The code may not be well written and there are many shortcomings. Welcome to point out and criticize. I will try my best to correct it. If you have any questions, please leave a message and I will try my best to answer them. Thank you for taking the time to read this article. 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:
|
<<: Detailed explanation of MySQL user rights management
>>: How to achieve centered layout in CSS layout
Recommend
Detailed explanation of docker version es, milvus, minio startup commands
1. es startup command: docker run -itd -e TAKE_FI...
Detailed explanation of the error problem when setting the default value of 0000-00-00 in the date and datetime types of Mysql database
Phenomenon: After MySQL version 5.7, the default ...
CSS uses radial-gradient to implement coupon styles
This article will introduce how to use radial-gra...
A brief analysis of vsftpd service configuration in Linux (anonymous, user, virtual user)
vsftpd Overview vsftpd is the abbreviation of &qu...
MYSQL database GTID realizes master-slave replication (super convenient)
1. Add Maria source vi /etc/yum.repos.d/MariaDB.r...
Detailed explanation of firewall rule settings and commands (whitelist settings)
1. Set firewall rules Example 1: Expose port 8080...
You may need a large-screen digital scrolling effect like this
The large-screen digital scrolling effect comes f...
Implementation of tens of thousands of concurrent connections on a single machine with nginx+lua
nginx is our most commonly used server, often use...
WeChat Mini Programs are shared globally via uni-app
In actual use, it is often necessary to share the...
Implementation method of Nginx+tomcat load balancing cluster
The experimental environment is as follows Here y...
Analysis of two usages of the a tag in HTML post request
Two examples of the use of the a tag in HTML post...
Explanation on whether to choose paging or loading in interactive design
The author of this article @子木yoyo posted it on hi...
Mysql | Detailed explanation of fuzzy query using wildcards (like,%,_)
Wildcard categories: %Percent wildcard: indicates...
HTML table tag tutorial (45): table body tag
The <tbody> tag is used to define the style...
About Vue to eliminate repeated prompts when refreshing the page when the Token expires
When the token expires, refresh the page. If the ...