js实现图片变化

CSS

.home{
    position: relative;
    width: 100%;
    height: 900px;
    overflow: hidden;
}
.home #tup{
    position: absolute;
}
.home #tup img{
    /*position: absolute;*/
}

HTML

<div class="home">
    <div id="tup">
        <img id="image" src="/static/images/service.jpg"></div>
</div>

JS

        $(function () {
        var curIndex = 0;
        //时间间隔(单位毫秒) ,每秒钟显示一张
        var timeInterval = 2000;
        var arr = new Array();
        arr[0] = "/static/images/service.jpg"
        arr[1] = "/static/images/equip.jpg"
        arr[2] = "/static/images/operation.jpg"
        function changeImg() {
            if (curIndex == arr.length-1){
                curIndex = 0;
            }
            else{
                curIndex += 1;
            }
            $('#image').attr('src',arr[curIndex]);
            //此处arr[curIndex]为路径,不需要加引号
        }
        setInterval(changeImg,timeInterval);
     })

 

posted @ 2019-04-14 15:57  野酷士-Z  Views(455)  Comments(0Edit  收藏  举报