分享一个用DHTML写的一个js简易轮播图

最新推荐文章于 2023-12-19 22:45:43 发布

babybk

最新推荐文章于 2023-12-19 22:45:43 发布

阅读量623

点赞数 1

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

本文链接：https://blog.csdn.net/babybk/article/details/51263157

版权

轮播图同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

js特效

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Andy丶年轻人</title>
<style type="text/css">
#tab { overflow:hidden; width:800px; height:500px; position:relative;}
#tab > img{position:absolute;top: 0;left: 0;transition:opacity 1s;}
#tab > img:not(:first-child){ opacity = 0;z-index: 0; }

</style>
<script>
    window.onload = function(){

        var images = document.getElementsByTagName('img');
        var pos = 0;
        var len = images.length;

        setInterval(function(){

            images[pos].style.opacity = "0";
            images[pos].style.zIndex = "0";
            pos = ++pos == len ? 0 : pos; 
            //此处的优先级，有没有很懊恼  哈哈！！
            //我的博客里有优先级算法，感觉复习吧！哈哈

            images[pos].style.opacity ='1';
            images[pos].style.zIndex = "1";

        },2000);

    };
</script>

</head>
<body>
<div id="tab">
    <img src="img/1.jpg" width="800" height="500"/>
    <img src="img/2.jpg" width="800" height="500"/>
    <img src="img/3.jpg" width="800" height="500"/>
</div>
</body>
</html>