当前位置：网站首页>JS rotation chart

JS rotation chart

2022-07-27 08:17:00 【Little bee learns Java】
Shuffling figure 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++){
    
                    // Hide all pictures 
                    aIli[i].style.display = 'none';
                    // Remove all the small white circle background colors 
                    aDli[i].style.background = ''; 
                }
                // Display the specified picture and small white circle background color according to the parameters in the following table 
                aIli[n].style.display = 'block';
                aDli[n].style.background = '#fff';
            }

            // Automatically switch pictures 
            function setTimer(){
    
                timer = setInterval(function(){
    
                    num++;
                    if(num == aIli.length){
    num = 0}
                    // according to num Display the corresponding picture 
                    change(num);
                },2000);
            }
            setTimer();

            // Hover the mouse to switch pictures , All the little white circles , Loop binding events 
            for(var i=0; i<aDli.length; i++){
    
                //  Because it is written directly in for In circulation , I don't know the number of floating circles , So we use self executing function 
                (function(i){
    
                    aDli[i].onmouseover = function(){
    
                        // Move the mouse into a small circle , Stop timer 
                        clearInterval(timer);
                        // call change function , According to the first i A picture 
                        change(i);
                        // If you need to make the automatic switching picture continue in the order before moving the mouse , Is set num The value of is i
                        num = i;
                    };
                    // The mouse leaves the small white circle , Reset timer 
                    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>
原网站
版权声明
本文为[Little bee learns Java]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/208/202207270502264987.html
当前位置：网站首页>JS rotation chart

JS rotation chart

Shuffling figure 1

边栏推荐

猜你喜欢

随机推荐
