关于javascript:JavaScript轮播图

6次阅读

共计 2242 个字符，预计需要花费 6 分钟才能阅读完成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 轮播图 </title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        li{
            list-style:none;
            float:left;
        }
        div{
            width:1226px;
            height:460px;
            position:relative;
            border:1px solid #ccc;
            margin:0 auto;
        }
        img{
            width:1226px;
            height:460px;
            display:none;
        }
        img.active{display:block;}
        .prev,.next{
            position:absolute;
            top:200px;
            font-size:40px;
            color:white;
            width:40px;
            height:70px;
            text-align:center;
            line-height:70px;
        }
        .prev{left:0px;}
        .next{right:0px;}
        .prev:hover,.next:hover{backgroud-color:rgba(0,0,0,0.6);
        }
        ul{
            position:absolute;
            bottom:20px;
            right:20px;
        }
        ul li{
            width:6px;
            height:6px;
            background-color:rgba(0,0,0,0.4);
            border-radius:50%;
            margin-right:10px;
            display:inline-block;
        }
        ul::after{
            content:"";
            display:block;
            clear:both;
        }
        li.active{background-color:white;}
    </style>
</head>
<body>
    <div id="box">
        <img class="active" src="1.png">
        <img src="2.png">
        <img src="3.png">
        <img src="4.png">
        <img src="5.png">
        <p class="prev"><</p>
        <p class="next">></p>
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    
    <script>
        /*
            1、点击小圆点切换对应的图片
            2、点击左右箭头切换
            3、主动轮播
        */
        var imgs=document.getElementsByTagName('img');
        var lis=document.getElementsByTagName('li');
        var prev=document.getElementsByClassName('prev')[0];
        var next=document.getElementsByClassName('next')[0];
        
        var index = 0;
        
        // 小圆点的点击事件，点击的时候图片发生变化
        for(var i=0;i<lis.length;i++){lis[i] = index;// 存下标
            lis[i].onclick = fucntion(){for(var j=0;j<imgs.length;j++){imgs[index].className = '';
                    imgs[j].className = '';
                    lis[j].className = '';
                }
                imgs[this.index].className = 'active';
                this.className = 'active';
                index = this.index;
            }
        }
        
        // 指向上一张的按钮被点击时
        prev.onclick = function(){lis[index].className = '';
            imgs[index].className = '';
            index--;
            if(index<0){index = lis.length-1;// 让它等于最大的下标}
            lis[index].className = 'active';
            imgs[index].className = 'active';
        }
        
        // 指向下一张的按钮被点击时
        next.onclick = function(){lis[index].className = '';
            imgs[index].className = '';
            index++;
            if(index == lis.length){index = 0;}
            lis[index].className = 'acitve';
            imgs[index].className = 'active';
        }
        
        var timer;
        box.onmouseenter = function(){clearInterval(timer);// 鼠标一进去，进行轮播
        }
        box.onmouseleave = function(){set();// 鼠标进去，继续执行 set();}
        
        function set(){timer = setInterval(fucntion(){lis[index].className = '';
                imgs[index].className = '';
                index++;
                if(index == lis.length){index = 0;}
                lis[index].className = 'active';
                imgs[index].classNmae = 'active';
            },2000);
        }
        
        set();
    </script>
</body>
</html>

正文完