js实现轮播图

最新推荐文章于 2024-07-24 21:47:58 发布

awwac

最新推荐文章于 2024-07-24 21:47:58 发布

阅读量179

点赞数

分类专栏： html 文章标签： js 轮播图

本文链接：https://blog.youkuaiyun.com/qq_42402381/article/details/90515616

版权

html 专栏收录该内容

6 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            width: 400px;
            height: 250px;
            border: solid 1px #E1E1E1;
        }
        .img{
            width: 400px;
            height: 250px;
            position: absolute;
        }
        .img img{
            width: 100%;
            height: 100%;
        }
        .num1{
            opacity: 1;
            position: absolute;
            z-index: 9;
            transition: all 0.5s;
        }
        .num2,.num3,.num4,.num5,.num6{
            position: absolute;
            opacity: 0;
            z-index: 1;
            transition: all 1s;
        }
        .switch{
            position: relative;
            left: 50%;
            top: 90%;
            width: 160px;
            height: 14px;
            z-index: 20;
            margin-left: -80px;
        }
        .switch a{
            display: inline-block;
            height: 14px;
            width: 14px;
            border-radius: 50%;
            background-color: #FFFFFF;
            margin-left: 7px;
        }
        .switch a:hover{
            background-color: #CCCBCB;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="img num1 active" data-id="1"><img src="http://img3.imgtn.bdimg.com/it/u=1986179278,1118313821&fm=26&gp=0.jpg" alt=""></div>
        <div class="img num2" data-id="2"><img src="http://img4.imgtn.bdimg.com/it/u=2153937626,1074119156&fm=26&gp=0.jpg" alt=""></div>
        <div class="img num3" data-id="3"><img src="http://img2.imgtn.bdimg.com/it/u=234634259,4236876085&fm=26&gp=0.jpg" alt=""></div>
        <div class="img num4" data-id="4"><img src="http://img3.imgtn.bdimg.com/it/u=3165522988,2394891213&fm=26&gp=0.jpg" alt=""></div>
        <div class="img num5" data-id="5"><img src="http://img2.imgtn.bdimg.com/it/u=1817942452,3032982386&fm=26&gp=0.jpg" alt=""></div>
        <div class="img num6" data-id="6"><img src="http://img0.imgtn.bdimg.com/it/u=1519175636,579560806&fm=26&gp=0.jpg" alt=""></div>
        <div class="switch">
            <a href="#" onmouseover="clickMe(1)"></a>
            <a href="#" onmouseover="clickMe(2)"></a>
            <a href="#" onmouseover="clickMe(3)"></a>
            <a href="#" onmouseover="clickMe(4)"></a>
            <a href="#" onmouseover="clickMe(5)"></a>
            <a href="#" onmouseover="clickMe(6)"></a>
        </div>
    </div>
    <script>
        function clickMe(num){
            let num2=document.getElementsByClassName("active")[0];
            num2.style.opacity="0";
            num2.style.zIndex="1";
            num2.classList.remove("active");
            let number="num"+num;
            let num1=document.getElementsByClassName(number)[0];
            num1.style.opacity="1";
            num1.style.zIndex="9";
            num1.classList.add("active");
        }
        setInterval(function () {
            let num2=document.getElementsByClassName("active")[0];
            let number=parseInt(num2.getAttribute("data-id"));
            number+=1;
            if(number>6){
                number=number-6;
            }
            this.clickMe(number);
        },3000)
    </script>
</body>
</html>

通过修改opacity和z-index来实现轮播

实现效果如下：