轮播图学习记录

发布于 2020-04-17  669 次阅读

不知不觉已经凌晨了，记录一下就洗洗睡吧！

效果

可以拖动查看→

  • 收获
  • 两种定时器
  • 匿名函数使用替代用index下标的方法
  • appendChild添加子元素

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .imgs{
            margin: 80px auto;
            width: 960px;
            height: 540px;
            overflow: hidden;
            position: relative;
        }
        img{
            width: auto;
            height: auto;
            /*max-height: 100%;*/
            max-width: 100%;
            float: left;
        }
        ul ,li{
            list-style-type: none;
        }
        .dots{
            position: absolute;
            width: 200px;
            height: 30px;
            /*background-color: pink;*/
            left: 50%;
            margin-left: -100px;
            bottom: 0;
        }
        .dot{
            height: 24px;
            width: 24px;
            border: 3px solid #fff;
            float: left;
            margin-right: 3px;
            border-radius: 50%;
            /*background-color: #000;*/
        }
    </style>
</head>
<body>
    <div class="imgs">
        <ul>
            <li><img src="https://ae01.alicdn.com/kf/Hce2579f143a4436a81f6f93efc980bd4u.jpg" alt=""></li>
            <li><img src="https://ae01.alicdn.com/kf/H49e18cd7539849fa9424b172bf73bba8W.jpg" alt=""></li>
            <li><img src="https://ae01.alicdn.com/kf/H129ffb1af1944c9aa13bee4e26220a6dy.jpg" alt=""></li>
            <li><img src="https://ae01.alicdn.com/kf/H5332a0436845429c8df750bc74c5660dG.jpg" alt=""></li>
            <li><img src="https://ae01.alicdn.com/kf/Hca699da3c0f148acb9125d20da47ff9ez.jpg" alt=""></li>
            <li><img src="https://ae01.alicdn.com/kf/H90807d8b742847e38974afa893fa99a7x.jpg" alt=""></li>
        </ul>
        <ul class="dots">
            <li class="dot" style="background-color: #fff;"></li>
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
        </ul>
        
    </div>
    <script>
        var oimg = document.getElementsByTagName('img');
        var od = document.getElementsByClassName('dot');
        var num = 0;//计数
        var t;//定时器
        function f1(i){
                num=i;
                t=setInterval(function(){
                    if(num==oimg.length)num=0;
                    for(var j=0;j<oimg.length;j++){
                        oimg[j].style.display='none';
                        od[j].style.backgroundColor='';
                    }
                    oimg[num].style.display='block';
                    od[num].style.backgroundColor='#fff';
                    num++;
                },1000);
            };
        window.onload=function(){
            
            f1(1);
            for(var j=0;j<oimg.length;j++){
                (function(j){//匿名函数相对于加index下标的提升
                    od[j].onmouseover=function(){
                        for(var k=0;k<oimg.length;k++){
                            oimg[k].style.display='none';
                            od[k].style.backgroundColor='';
                        }
                        this.style.backgroundColor='#fff';
                        oimg[j].style.display='block';
                        clearInterval(t);
                    };
                    od[j].onmouseout=function(){
                        f1(j);
                    };
                })(j);
            }
        };

    </script>
</body>
</html>

纯手敲，转载注明出处 谢谢