js图片转动特效代码

文章中心/
特效/
js图片转动特效代码

时间 : 2023-02-23 23:07:41 声明： : 文章内容来自网络，不保证准确性，请自行甄别信息有效性

完整的js图片转动特效代码，复制就可使用，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片转动特效</title>
    <style type="text/css">
        .box{
            width:200px;
            height:200px;
            position:relative;
            margin:20px auto;
        }
        .box img{
            position:absolute;
            left:0;
            top:0;
            width:200px;
            height:200px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="1.jpg" alt="">
        <img src="2.jpg" alt="">
        <img src="3.jpg" alt="">
    </div>
    <script type="text/javascript">
        var box = document.querySelector('.box');
        var imgs = box.querySelectorAll('img');
        var index = 0;
        setInterval(function(){
            imgs[index].style.opacity = 0;
            index++;
            if(index >= imgs.length){
                index = 0;
            }
            imgs[index].style.opacity = 1;
        }, 1000);
    </script>
</body>
</html>

上一篇
超大霸屏的网页特效代码

下一篇
notepad怎么设置中文

同类文章