前端：轮播图 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         body,div,ul,li {
        margin:0;  /* 边框 */
        padding:0; /* 边框圆角 */
        border:0;   
    }
    ul {
        list-style:none;
        text-align: center;
    }
    #box {
        position:relative;
        width: 100%;
        height: 500px;
        border-radius:5px;
        margin:10px auto;
        margin:50px 0px 0px;
    }
    #box .list li {
        position:absolute;
        top:0;
        left:0;          /* **left**属性定义了定位元素的左外边距边界与其包含块左边界之间的偏移，非定位元素设置此属性无效。 */
        width: 100%;
        height:500px;
        opacity:0;
        filter:alpha(opacity=0);     
    }
    #box .list li.current {
        opacity:1;filter:alpha(opacity=100);
    }
    #box .count {
        position:absolute;
        right:20px;      /* 与position属性有关，当position属性为absolute或fixed 时表示：圆点距离右边边框距离， */
        bottom:15px;      /* 圆点距离底部边框距离 */
    }
    #box .count li {
        float:left;
        width:40px;         /* 小圆球大小 */
        height:40px;        /* 小圆球大小 */
        background:#f90;   /* 未轮播到时小圆球颜色 */
        opacity:0.7;           /* 透明度 */
        border-radius: 20px;    /* 圆度 */     
        margin-left:25px;       /* 小圆圈间隔 */    
    }
    #box .count li.current {
        background:#f60;       /* 轮播到时小圆球颜色 */
        opacity:1;                /* 透明度 */
    } 
    </style>
</head>
<body>
    <div id="box">
        <ul class="list">
            <li class="current"><img src="d:\GZrj\MVSC\LianXi\图\2023-08-17-14-40-12.png" width="100%px" height="100%px"></li>
            <li><img src="d:\GZrj\MVSC\LianXi\图\img\2.jpg" width="100%px" height="100%px"></li>
            <li><img src="d:\GZrj\MVSC\LianXi\图\img\15963587.jpg" width="100%px" height="100%px"></li>
            <!-- 1.此处可根据需要添加减少轮播图数量 -->
        </ul>
        <ul class="count">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <!-- 2.此处添加轮播图右下角小圆球 -->
        </ul>
        </div>
</body>
</html>
<script>
    window.onload = function(){
        //第一步，选取要操作的元素
        var box = document.querySelectorAll('#box')[0];
        var oUl = document.querySelectorAll('.list')[0];
        var aLi = document.querySelectorAll('.list li');
        var aImg = document.querySelectorAll('img');
        var aNum = document.querySelectorAll('.count li');
        var index = 0;
        var timer = dd = null;
        var opa = 0;
        //先写手动的
        for(var i=0;i<aNum.length;i++){
            //先把下标存储一下
            aNum[i].index = i;
            aNum[i].onmouseover = function(){
                show(this.index);
            }
        }
        function show(a){
            //当前图片显示的时候，那么，其余的图片应该都是隐藏状态吧
            //这里，要改变下index的当前值就好了
            index = a;
            for(var i=0;i<aLi.length;i++){
                aLi[i].style.opacity = 0;
                aNum[i].className = '';
            }
            //让当前的图片显示
            aNum[a].className = 'current';
            aLi[a].style.opacity = 1;           
        }
        //再写自动的
        function autoplay(){
            timer = setInterval(function(){
                index++;
                if(index >= aLi.length){
                    index = 0;
                }
                console.log(index);
                show(index);
            },1000)
        }
        autoplay();
        //当鼠标移入这个box的时候，这个autoplay停止,移出的时候继续
        box.onmouseover = function(){
            clearInterval(timer);
        }
        box.onmouseout = function(){
            autoplay();
        }
    }
</script>

 

posted @ 2023-08-30 10:38  Hh0826  阅读(44)  评论(0)    收藏  举报