轮播图demo(WM)

最新推荐文章于 2024-04-15 14:27:13 发布

Casablanca_jhBi

最新推荐文章于 2024-04-15 14:27:13 发布

阅读量208

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_37243717/article/details/79679776

版权

js 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ul{
                list-style: none;
            }

            li{
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 484px;
            }
        </style>
    </head>
    <body>
        <div id="banner">
            <ul>
                <li><img src="img/banner1.jpg"/></li>
                <li><img src="img/banner2.jpg"/></li>
                <li><img src="img/banner3.jpg"/></li>
                <li><img src="img/banner4.jpg"/></li>
                <li><img src="img/banner5.jpg"/></li>
                <li><img src="img/banner6.jpg"/></li>
            </ul>
        </div>
        <script type="application/javascript">
            main();

            function main(){
                var obj1 = document.getElementById('banner');
                var li = obj1.getElementsByTagName('li');
                var j = 0;
                var iIndex = 1;
                var timer;

                for(var i = 0; i < li.length; i++){
                    if(i == j){
                        li[i].style.opacity = '1';
                        continue;
                    }
                    li[i].style.opacity = '0';
                }

                function startRoll(){
                    j++;
                    if(j >= li.length){
                        j = 0;
                    }
                    li[j].style.zIndex = iIndex;
                    iIndex++;
                    fadeIn(li[j],1);
                };

                function fadeIn(obj, period){
                    var COUNT = 50;
                    clearInterval(obj.timer);
                    obj.timer = setInterval(function(){
                        var opacityValue = Number.parseFloat(obj.style.opacity);
                        opacityValue += period/COUNT;
                        if(opacityValue < 1){
                            obj.style.opacity = opacityValue;
                        }else{
                            obj.style.opacity = 1;
                            clearInterval(obj.timer);
                            for(var i = 0; i < li.length; i++){
                                if(i == j){
                                    continue;
                                }
                                li[i].style.opacity = '0';
                            }
                        }
                    },1000/COUNT);
                }

                timer = setInterval(startRoll,2000);
            }
        </script>
    </body>
</html>

Casablanca_jhBi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图demo(WM)

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; ul{
复制链接

扫一扫

专栏目录