垃圾轮播插件

最新推荐文章于 2024-05-09 09:49:17 发布

原创最新推荐文章于 2024-05-09 09:49:17 发布 · 199 阅读

CC 4.0 BY-SA版权

本文详细介绍了如何使用HTML和CSS创建一个自动轮播的图片展示效果，包括样式设置和JavaScript交互，实现页面元素的动态显示与切换。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        ul{
            width: 300px;
            height:50px;
            margin: 50px auto;
        }
        li{
            width: 30px;
            height:30px;
            border-radius: 50%;
            background: red;
            margin-left: 20px;
            font: 20px/30px "";
            text-align: center;
            line-height: 30px;
            float: left;
            list-style: none;
            cursor: pointer;
        }
        div{
            width: 400px;
            height:400px;
            background: pink;
            font: 30px/100px "";
            display: none;
            text-align: center;
            line-height: 400px;
            margin: 50px auto;
            cursor: pointer;
        }
        .act{
            display: block;
        }
        .left{
            font-size:50px;
            position:absolute;
            top:300px;
            left: 470px;
            cursor: pointer;
        }
        .right{
            font-size:50px;
            position:absolute;
            top:300px;
            right: 470px;
            cursor: pointer;
        }
        .l{
            background: blue;
        }
    </style>
</head>
<body>
<section id="sec">
 <ul>
     <li class="li l">1</li>
     <li class="li">2</li>
     <li class="li">3</li>
     <li class="li">4</li>
     <li class="li">5</li>
     <li class="li">6</li>
 </ul>
 <div class="act div">1</div>
 <div class="div">2</div>
 <div class="div">3</div>
    <div class="div">4</div>
    <div class="div">5</div>
    <div class="div">6</div>
    <span class="left"><</span>
    <span class="right">></span>
</section>
 <script>
     class Tab{
         constructor(id){
             this.tab=document.getElementById(id);
             this.li=this.tab.getElementsByClassName("li");
             this.div=this.tab.getElementsByClassName("div");
             this.right=this.tab.getElementsByClassName("right")[0];
             this.left=this.tab.getElementsByClassName("left")[0];
             this.init()
         }
        init(){
//            for(let i=0;i<this.li.length;i++){
//                this.li[i].onclick=()=>{
//                    for(var j=0;j<this.li.length;j++){
//                        this.div[j].classList.remove("act")
//                    }
//                    this.div[i].classList.add("act")
//                }
//
//            }

            this.num=0;
            this.fn=()=>{
                this.num++;
                if(this.num>this.div.length-1){
                    this.num=0;
                }
                for(let j=0; j<this.div.length;j++){
                    for(var i=0;i<this.div.length;i++){
                        this.div[i].classList.remove("act")
                        this.li[i].classList.remove("l")
                    }
                    this.div[this.num].classList.add("act")
                    this.li[this.num].classList.add("l")
                }
            }
            setInterval(this.fn,1000)

            this.right.onclick=function(){

                console.log(1);
                this.num++;
                if(this.num>this.div.length-1){
                    this.num=0;
                }
                for(let j=0; j<this.div.length;j++){
                for(var i=0;i<this.div.length;i++){
                    this.div[i].classList.remove("act")
                    this.li[i].classList.remove("l")
                }
                this.div[this.num].classList.add("act")
                    this.li[this.num].classList.add("l")
                }

            }.bind(this)
            this.left.onclick=function(){
                this.num--;
                if(this.num==-1){
                    this.num=5;
                }
                for(let j=0; j<this.div.length;j++){
                    for(var i=0;i<this.div.length;i++){
                        this.div[i].classList.remove("act")
                        this.li[i].classList.remove("l")
                    }
                    this.div[this.num].classList.add("act")
                    this.li[this.num].classList.add("l")
                }

            }.bind(this);
        }

     }
     new Tab("sec")
 </script>
</body>
</html>