JavaScript 结合定时器实现简易轮播图

JavaScript 结合定时器实现简易轮播图

本文分享了一段使用 JavaScript 实现轮播图效果的具体代码，供读者参考学习。

该案例利用定时器功能构建了一个基础的轮播图组件，具体实现细节如下所示。

首先定义相关的 CSS 样式代码。

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

接着编写 HTML 结构代码。

<div class="slider-box">
        <div class="images">
            <!-- 以后哪张图片要想显示了，只需要添加一个
            active类就行 -->
            <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="前一张"></a>
            <a href="javascript:;" class="next" title="下一张"></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>

最后补充核心的 JavaScript 逻辑代码。

<script>
        // 定时器切换图片的功能
        var images = document.querySelectorAll('.images a')
        var index = 0 //定义要播放的图片的索引
        var pages = document.querySelectorAll(".dot")
        var prev = document.querySelector(".prev")
        var next = document.querySelector(".next")
        // 根据索引值切换图片
        // 找到images的a标签，添加active这个类
        function showImage(idx){
            images.forEach(function(v,i){
                // idx = 1
                // i = 0 1 2 3 4
                if(i===idx){
                  v.classList.add('active')
                //控制对应点高亮
                  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(){
        // 定时器控制图片的切换和点击下一张的功能一样
        // 调用下一张的点击操作
        next.click()// 模拟next的点击操作
    },3000)
</script>

以上即为本文的全部内容，希望这段代码能对读者的学习有所帮助，同时也欢迎大家继续支持本站。