当前位置：网站首页>js轮播图

js轮播图

2022-07-27 05:03:00 【小蜜蜂学爪哇】

轮播图1

 <style>
        *{
    
            margin:0;
            padding: 0;
        }
        ul{
    
            list-style: none;
        }
        #box{
    
            position:relative;
            width:632px;
            margin: 100px auto;
        }
        #imgs{
    
            width: 632px;
            height:340px;
            overflow:hidden;
        }
        #dots{
    
            position:absolute;
            left:530px;
            bottom:15px;
            width:100px;
        }
        #dots li{
    
            float:left;
            width:10px;
            height:10px;
            /* padding:5px; */
            margin:0 3px;
            border:2px solid #fff;
            border-radius:50%;
        }
    </style>
    <script>
        window.onload = function(){
    
            var oBox = document.getElementById('box');
            var oImgs = document.getElementById('imgs');
            var oDots = document.getElementById('dots');
            var aIli = oImgs.getElementsByTagName('li');
            var aDli = oDots.getElementsByTagName('li');
            var num = 0;
            var timer = null;
            function change(n){
    
                for(var i=0; i<aIli.length; i++){
    
                    //将所有的图片都隐藏
                    aIli[i].style.display = 'none';
                    //将所有的小白圈背景色去掉
                    aDli[i].style.background = ''; 
                }
                //根据下表参数将指定的图片和小白圈背景色显示
                aIli[n].style.display = 'block';
                aDli[n].style.background = '#fff';
            }

            //自动切换图片
            function setTimer(){
    
                timer = setInterval(function(){
    
                    num++;
                    if(num == aIli.length){
    num = 0}
                    //根据num显示相应的图片
                    change(num);
                },2000);
            }
            setTimer();

            //鼠标悬浮切换图片,所有的小白圈，循环绑定事件
            for(var i=0; i<aDli.length; i++){
    
                // 由于直接写在for循环里，不知道悬浮小圈是第几个，所以采用自执行函数
                (function(i){
    
                    aDli[i].onmouseover = function(){
    
                        //鼠标移入小圈，停止定时器
                        clearInterval(timer);
                        //调用change函数，显示第i张图片
                        change(i);
                        //如果需要让自动切换图片按照鼠标移入以前的顺序继续，则设置num的值为i
                        num = i;
                    };
                    //鼠标离开小白圈，重新设置定时器
                    aDli[i].onmouseout = function(){
    
                        setTimer();
                    };
                })(i);
            }
            
        };
    </script>
</head>
<body>
    <div id="box">
        <ul id="imgs">
            <li><img src="../04exercise/img/1.jpg" alt=""></li>
            <li><img src="../04exercise/img/2.jpg" alt=""></li>
            <li><img src="../04exercise/img/3.jpg" alt=""></li>
            
        </ul>
        <ul id="dots">
            <li style="background:#fff"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
原网站

版权声明
本文为[小蜜蜂学爪哇]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_48687155/article/details/108181823

边栏推荐

猜你喜欢

随机推荐