js淡入淡出轮播图精华

最新推荐文章于 2021-07-27 21:20:04 发布

海龟先生plus

最新推荐文章于 2021-07-27 21:20:04 发布

阅读量134

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_45219069/article/details/95506424

版权

js 专栏收录该内容

70 篇文章 1 订阅

订阅专栏

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 600px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid;
            position: relative;
        }
        .box .pic img{
            width: 600px;
            height: 400px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }
        .box .pic .ac{
            opacity: 1;
            z-index: 1;
        }
        .box .btn{
            position: absolute;
            right: 20px;
            bottom: 20px;
            z-index: 9999;
        }
        .box .btn span{
            display: block;
            float: left;
            width: 30px;
            height: 30px;
            background-color:#ffffff;
            color:black;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
            margin: 4px;
            cursor: pointer;
        }
        .box .both{
            width: 100%;
            height: 5 0px;
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -25px;
            position: relative;
        }
        .box .both i{
            font-style: normal;
            font-size: 26px;
            position: absolute;
            width:50px;
            height:50px;
            text-align: center;
            line-height: 50px;
            background-color: rgba(200,200,200, .6);
            cursor: pointer;
            color: #ffffff;
            z-index: 9;
        }
        .box .both i:nth-child(1){
            left: 0;
        }
        .box .both i:nth-child(2){
            right: 0;
        }
        .bg{
            background-color: red !important;
        }
        .box .pic .pc{
            z-index: 1;
            opacity: 1;
            transition: opacity 1s;
        }
    </style>
</head>
<body>
    <div class="box">
       <div class="pic">
           <img src="img2/1.jpg" alt="" class="ac">
           <img src="img2/2.jpg" alt="">
           <img src="img2/3.jpg" alt="">
           <img src="img2/4.jpg" alt="">
           <img src="img2/5.jpg" alt="">
       </div>
       <div class="btn">
           <span>1</span>
           <span>2</span>
           <span>3</span>
           <span>4</span>
           <span>5</span>
       </div>
       <div class="both">
           <i><<</i>
           <i>>></i>
       </div>
    </div>
    <script>
        var pics=document.querySelector(".pic")
        var pic=pics.children
        var btn=document.querySelectorAll("span")
        var both=document.querySelectorAll("i")
        var box=document.querySelector(".box")

        var index=0
        var timer=null
        btn[0].className="bg"
        for(var i=0;i<btn.length;i++){
            btn[i].index=i
            btn[i].onclick=function(){
                for(var j=0;j<btn.length;j++){
                    btn[j].className=""
                    pic[j].className=""
                }
                this.className="bg"
                pic[this.index].className="pc"
            }
        }
        both[0].onclick=function(){
            index--
            if(index<0){
            index=btn.length-1
            }
            for(var j=0;j<btn.length;j++){
                    btn[j].className=""
                    pic[j].className=""
                }
             btn[index].className="bg"
             pic[index].className="pc"
        }
        both[1].onclick=function(){
            index++
            if(index>pic.length-1){
            index=0
            }
            for(var j=0;j<btn.length;j++){
                    btn[j].className=""
                    pic[j].className=""
                }
             btn[index].className="bg"
             pic[index].className="pc"
        }
        timer=setInterval(function(){
            both[1].onclick()
        },3000)
        box.onmouseover=function(){
            clearInterval(timer)
        }
        box.onmouseout=function(){
          timer=setInterval(function(){
            both[1].onclick()
            },3000)
        }
    </script>

在这里插入图片描述