JavaScript implementation of carousel example

This article shares the specific code for JavaScript to achieve the effect of the carousel for your reference. The specific content is as follows

A simple carousel chart written using a timer, look directly at the code, as follows:

1.css code

<style>
       *{
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }
       body{
           font-size: 14px;
           font-family: Arial, Helvetica, sans-serif;
       }
       .slider-box{
          width: 1226px;
          height: 460px;
          margin: 10px auto;
          overflow: hidden;
          position: relative;
       }
      .slider-box .images a{
        width: 100%;
        height: 460px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        transition: all 2s;
       }
 
       .slider-box .images a.active{
           opacity: 1;
       }
 
       .slider-box .images a img{
           width: 100%;
           height: 100%;
           display: block;
       }
       .slider-box .nav{
           position: absolute;
           left: 0;
           top: 195px;
           width: 100%;
           /* background-color: red; */
           padding: 0 10px;
           /* height: 100px; */
       }
       .slider-box .nav a{
           background-image: url(img/icons.png);
           width: 41px;
           height: 69px;
           display: inline-block;
           background-repeat: no-repeat;
       }
       .slider-box .nav .prev{
           background-position: -84px 0;
       }
       .slider-box .nav .prev:hover{
           background-position: 0 0;
       }
       .slider-box .nav .next{
           background-position: -125px 0;
           float: right;
       }
       .slider-box .nav .next:hover{
           background-position: -42px 0;
       }
       .slider-box .pages{
           position: absolute;
           right: 20px;
           bottom: 25px;
           font-size: 0;
           width: 1186px;
           text-align: center;
           /* background-color: rebeccapurple; */
       }
       .slider-box .pages .dot{
           display: inline-block;
           width: 10px;
           height: 10px;
           border-radius: 50%;
           background-color: rgba(0,0,0,0.4);
           margin-right: 10px;
       }
       .slider-box .pages .dot:hover{
        background-color: yellow;
       }
       .slider-box .pages .dot.active{
        background-color: yellow;
       }
 
</style>

2.html code

<div class="slider-box">
        <div class="images">
            <!-- If you want to display any picture in the future, just add an active class -->
            <a href="#" class="active">
                <img src="img/1.jpg" alt="">
            </a>
            <a href="#" >
                <img src="img/2.jpg" alt="">
            </a>
            <a href="#" >
                <img src="img/3.jpg" alt="">
            </a>
            <a href="#" >
                <img src="img/4.jpg" alt="">
            </a>
            <a href="#" >
                <img src="img/5.jpg" alt="">
            </a>
        </div>
        <div class="nav">
            <a href="javascript:;" class="prev" title="Previous"></a>
            <a href="javascript:;" class="next" title="Next"></a>
        </div>
        <div class="pages">
            <a href="javascript:;" class="dot active"></a>
            <a href="javascript:;" class="dot"></a>
            <a href="javascript:;" class="dot"></a>
            <a href="javascript:;" class="dot"></a>
            <a href="javascript:;" class="dot"></a>
        </div>
</div>

3.js code

<script>
        // Timer switching image function var images = document.querySelectorAll('.images a')
        var index = 0 //Define the index of the picture to be played var pages = document.querySelectorAll(".dot")
        var prev = document.querySelector(".prev")
        var next = document.querySelector(".next")
        // Switch images according to index value // Find the a tag of images and add the active class function showImage(idx){
            images.forEach(function(v,i){
                // idx = 1
                // i = 0 1 2 3 4
                if(i===idx){
                  v.classList.add('active')
                //Control the corresponding point highlight pages[i].classList.add("active")
 
                }else{
                    v.classList.remove('active')
                    pages[i].classList.remove("active")
                }
            })
        }
    // showImage(3)
 
    prev.onclick = function(){
        if(index===0){
            index = images.length - 1 // 4
        }else{
            index = index - 1
        }
        showImage(index)
    }
    next.onclick = function(){
        if(index===images.length-1){
            index = 0
        }else{
            index+=1
        }
        showImage(index)
    }
    var timer = setInterval(function(){
        // The timer controls the switching of pictures and has the same function as clicking the next picture // Call the click operation of the next picture next.click() // Simulate the click operation of next },3000)
</script>

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:

JS implements multiple tab switching carousel
Native JavaScript to achieve the effect of carousel
js to achieve a simple carousel effect
JavaScript to implement the most complete code analysis of simple carousel (ES6 object-oriented)
JavaScript to implement simple carousel chart most complete code analysis (ES5)
js to implement the complete code of the carousel
Sample code for implementing carousel with native js
js to achieve the effect of supporting mobile phone sliding switch carousel picture example
JS carousel diagram implementation simple code
js to achieve click left and right buttons to play pictures

<<: How to enter and exit the Docker container

>>: The principle and application of MySQL connection query