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 01

Implementation 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 02

Implementation 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 03

To 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: