js—图片轮播

最新推荐文章于 2024-07-27 23:06:12 发布

otatoz

最新推荐文章于 2024-07-27 23:06:12 发布

阅读量101

点赞数

分类专栏： js 文章标签：图片轮播 js

本文链接：https://blog.csdn.net/qq_42720683/article/details/82620363

版权

js 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img{
            height: 200px;
            width: 200px;
            display: block;
        }
        .container{
            height: 200px;
            width: 200px;
            border: 1px solid black;
            overflow: hidden;
        }
    </style>
    <script>
        window.onload = function(){

           // 手动切换图片
            var btns = document.getElementsByTagName('button');
            var imgs = document.images;
            btns[0].onclick = function(){
                // imgs[0].display = 'block';
                // imgs[1].display = 'none';
                // imgs[2].display = 'none';

                //先全部隐藏
                for(var i=0;i<imgs.length;i++){
                    imgs[i].style.display = 'none';
                }
                imgs[0].style.display = 'block';
            }
            btns[1].onclick = function(){
                // imgs[0].display = 'block';
                // imgs[1].display = 'none';
                // imgs[2].display = 'none';


                for(var i=0;i<imgs.length;i++){
                    imgs[i].style.display = 'none';
                }
                imgs[1].style.display = 'block';
            }
            btns[2].onclick = function(){
                // imgs[0].display = 'block';
                // imgs[1].display = 'none';
                // imgs[2].display = 'none';


                for(var i=0;i<imgs.length;i++){
                    imgs[i].style.display = 'none';
                }
                imgs[2].style.display = 'block';
            }

            //使用定时器，自动切换
            var count = 0;
            setInterval(function(){
                for(var i=0;i<imgs.length;i++){
                    imgs[i].style.display = 'none';
                }
                var index = count%imgs.length;
                imgs[index].style.display = 'block';
                  count++;
        },100);

        }
    </script>
</head>
<body>
    <button>显示1</button>
    <button>显示2</button>
    <button>显示3</button>
    <div class="container">
        <img src="./1.jpg" alt="">
        <img src="./2.jpeg" alt="">
        <img src="./3.jpg" alt="">
    </div>
</body>

otatoz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js—图片轮播

<head> <meta charset="UTF-8"> <title>Document</title> <style> img{ height: 200px; width: 200px; display: block; ...
复制链接

扫一扫

专栏目录