图片切换—基于原生js

最新推荐文章于 2021-06-20 00:04:45 发布

maodoudou.

最新推荐文章于 2021-06-20 00:04:45 发布

阅读量96

点赞数

分类专栏：原生js 练习demo 文章标签： js

本文链接：https://blog.csdn.net/abcd2923/article/details/109957089

版权

原生js 练习demo 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<div class="pic_tab">
        <div class="pic">
            <img src="images/service_pic1.jpg"/>
        </div>
        <div class="btn">
            <button class="start">开始</button>
            <button class="stop">暂停</button>
        </div>
    </div>

<style>
        .pic_tab{
            width: 550px;
            margin: 100px auto;
            text-align: center;
        }
    </style>

<script type="text/javascript">
    window.onload = function(){
        var img = document .getElementsByTagName("img")[0];
        var imgArr = ["images/service_pic1.jpg","images/service_pic2.jpg","images/service_pic3.jpg","images/service_pic4.jpg"];
        var start = document.getElementsByClassName("start")[0];
        var stop = document.getElementsByClassName("stop")[0];
        var timer;
        var index = 0;
        start.onclick = function(){
            clearInterval(timer);
            timer = setInterval(function(){
                index ++;
                index %= imgArr.length;
                img.src = imgArr[index];
            },1000)
        };
        stop.onclick =function(){
            clearInterval(timer);
        }
    }
        
    </script>