使用JavaScript完成轮播图的定时自动切换

最新推荐文章于 2024-01-18 22:18:01 发布

早柚子

最新推荐文章于 2024-01-18 22:18:01 发布

阅读量350

点赞数

文章标签： javascript css html

本文链接：https://blog.youkuaiyun.com/weixin_57081246/article/details/120633607

版权

HTML代码，设置三张图片，可以增加。body中加入οnlοad="start()"让页面加载后开始轮播图的自动切换

<body onload="start()">
    <!-- 自选三张图片，尺寸最好相同 -->
    <div id="content1">
        <img id="active" class="img1"src="" alt="">
        <img class="img1"src="" alt="">
        <img class="img1"src="" alt="">
    </div>
</body>

css代码：


        #content1{
            /* 图片尺寸 */
            width: 59%; 
            height: 460px; 
            float: left; 
            border: rgba(0, 139, 139, 0.363) 1px solid;
            margin-top: 1%;
        }
        /* 图片全部设置不可见 */
        .img1{
            display: none;
        }
        /* 让第一张图片可见 */
        #active{
            display: block;
        }

JavaScript代码：

1.开始函数

function start(){
            shuffling();
        }

2.改变图片的dispaly属性让页面显示不同的图片

function imgshuffling(index){
            var img1=document.querySelectorAll(".img1");
            for (var i = 0; i < img1.length; i++) {
                if(i==index){
                    img1[i].style.display="block";
                }
                else{
                    img1[i].style.display="none";
                }
            }
        }

3.计时器函数

         function shuffling(){
            var j=0;
            setInterval(function(){
                imgshuffling(j);
                j++;
                if(j==3){
                    j=0;
                }
            },3000)