使用數組封裝圖片實現輪播圖

時間 2019-11-21

原文原文鏈接

　　下列實例是將輪播圖所須要的圖片封裝在一個數組裏，經過遍歷實現圖片的循環播放，並經過setInterval函數控制時間間隔。數組

HTML佈局以下：函數

<body onload="imagechange()">
    <!--承載圖片的DIV並試着第一張圖片-->
    <div class="div1">
        <img id="imagescroll" src="images/1.jpg"/>
    </div>
</body>

CSS佈局以下：佈局

.div1{
                margin: 50px auto;
                width: 80%;
                height:300px;
                text-align: center;
            }
 
            #imagescroll{
                width: 534px;
                height: 300px;
            }

JS代碼以下：spa

function imagechange(){
    //獲取承載圖片的元素
    var imagecontrol=document.getElementById("imagescroll");
    //把全部的圖片封裝在一個數組中
    var imageArr =["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg"];
    var index=0;
    //經過setInterval函數每隔2秒改變一下圖片，注意該函數的使用方法
    setInterval(function(){
        //獲取當前圖片的編號
        var i =index;
        //若是超過最大編號，則回滾到第一張圖片
        if(i>=imageArr.length){
            index=0;
            i=0;
        }
        //設置背景圖片
        imagecontrol.src=imageArr[i];
        index=index+1;
    },2000);
}

相關標籤/搜索