DOM实现轮播图----图片自动按顺序播放，并且可以选中图片进行播放，实现鼠标落在图中就暂停播放，移出图中就继续播放

最新推荐文章于 2024-02-20 00:03:41 发布

MaGgIeOo0

最新推荐文章于 2024-02-20 00:03:41 发布

阅读量129

点赞数 1

分类专栏： web前端基础文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_62971115/article/details/132367317

版权

web前端基础专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div {
            width: 550px;
            height: 700px;
        }

        #img{
            width: 550px;
        }

        span {
            display: inline-block;
            height: 20px;
            padding-left: 26px;
            padding-right: 26px;
            margin-left: 1px;
            margin-right: 0px;
            color: #cdcaca;
            border-left: 1px #aba2a2 solid;
        }
    </style>
</head>

<body>
    <div id="div" onmouseover="stop()" onmouseout="start()">
        <div>
            <img id="img" src="img/1.jpg">
        </div>
        <div id="span" style="background-color: aliceblue;">
            <span id="i1" onclick="number('img/1.jpg')">1</span>
            <span id="i2" onclick="number('img/2.jpg')">2</span>
            <span id="i3" onclick="number('img/3.jpg')">3</span>
            <span id="i4" onclick="number('img/4.jpg')">4</span>
            <span id="i5" onclick="number('img/5.jpg')">5</span>
            <span id="i6" onclick="number('img/6.jpg')">6</span>
            <span id="i7" onclick="number('img/7.jpg')">7</span>
            <span id="i8" onclick="number('img/8.jpg')">8</span>
        </div>
    </div>
</body>

<script>
    //点击切换
    function number(im) {
        document.getElementsByTagName("img")[0].src = im;
    }

    var i=0;
    var arr =["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg",
              "img/5.jpg","img/6.jpg","img/7.jpg","img/8.jpg"]
    //console.log(img)
    //自动切换
    function automatic() {
        document.getElementById("img").src = arr[i];
        i++;
        if(i==arr.length){
            i=0;
        }
    }
    var id = window.setInterval(automatic, 1000);

    function stop(){
         window.clearTimeout(id);
    }

    function start(){
        id = window.setInterval(automatic, 1000);
    }
    
</script>

</html>

MaGgIeOo0

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM实现轮播图----图片自动按顺序播放，并且可以选中图片进行播放，实现鼠标落在图中就暂停播放，移出图中就继续播放

【代码】DOM实现轮播图----图片自动按顺序播放，并且可以选中图片进行播放，实现鼠标落在图中就暂停播放，移出图中就继续播放。
复制链接

扫一扫