JavaScript實現輪播圖案例

Posted on by

本文實例為大傢分享瞭JavaScript實現輪播圖效果的具體代碼，供大傢參考，具體內容如下

運用定時器所寫成的一個簡單的輪播圖，直接看代碼，如下：

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

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

3.js代碼

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

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：