JavaScript-轮播图

<!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>
JavaScript-轮播图

王超

引用和评论

Vue3.0与Vue2.X版本的区别

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高
