原生淡入淡出轮播图（html+css+js）

最新推荐文章于 2024-07-12 15:30:02 发布

感谢包容我的问题003

最新推荐文章于 2024-07-12 15:30:02 发布

阅读量1.4k

点赞数 2

文章标签：淡入淡出轮播图

本文链接：https://blog.csdn.net/qq_43889386/article/details/90348135

版权

主要思路：将需要轮播的6张图片放到content这个盒子中，为了避免操作DOM，加入了‘on’这个类名，通过‘on’改变了opacity（透明度）的值，来实现淡入淡出的效果。同时使用了setinterval，用一个自动执行函数让图片按顺序4s翻页。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淡入淡出轮播图</title>
    <style type="text/css">
        .class1,ul{                             //清除默认样式
            margin:0px;
        }
        ul{
            padding-left: 0px;
            list-style: none;
        }
        .content{                
            position: relative;
            width: 720px;
            height: 352px;
            overflow: hidden;
            background-color: deepskyblue;
            margin: 50px auto 0px;
        }
        .imglist{
            position: absolute;
            width: 720px;
            height:336px;
            background-color: palevioletred;
        }
        .imglist img{
            position: absolute;
            opacity: 0;                             //opacity为透明度，默认把图片都设为透明
            transition: 2s;
        }
        .imglist img.on {                           //opacity为1，图片出现
            opacity: 1;
        }
        .btnright,.btnleft                          //设置左右翻页的箭头样式
        {
            position: absolute;
            top:50%;
            margin-top: -25px;
            width: 50px;
            height: 50px;
            background-color: ugba(0,0,0,0.7);
            font-size: 60px;
            color: white;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
        }
        .btnleft{                                 设置翻页箭头的位置
            left: 0;
        }
        .btnright{
            right: 0;
        }
        .tab{
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
        }
        .tab li{                                   设置图片下小圆点的样式
            float: left;
            list-style:none;
            width: 14px;
            height: 14px;
            margin-right: 8px;
            border-radius: 50%;
            background-color: #ccc;
            cursor: pointer;
        }
        .tab li.on{
            background-color: #f70;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="imglist ">
        <ul>                            //插入六张图片
            <img class='on' src="01.jpg.png" alt="">   //类名为'on'时,图片不透明，第一张图片不能为透明
            <img class="" src="02.jpg.png" alt="">
            <img class="" src="03.jpg.png" alt="">
            <img class="" src="04.jpg.png" alt="" >
            <img class="" src="05.jpg.png" alt="">
            <img class="" src="06.jpg.png" alt="">
        </ul>
    </div>
    <div class="tab">                                  //设置图片下方的小圆点
        <ul>
            <li class="on"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
        <div class="btnleft">&lt;</div>
        <div class="btnright">&gt;</div>
</div>

                   //以下是js代码

    <script>
        var oBtnRight = document.querySelector('.btnright');   //获取右键元素
        var oBtnLeft = document.querySelector('.btnleft');     //获取左键元素
        var aTabs = document.querySelectorAll('.tab li');      //获取图片下方小圆点
        var aImages = document.querySelectorAll('.imglist img');
        var index= 0;                                          //记录下标
        auto();                                                //自动执行函数
        function auto(){
            setInterval(function () {                          //定时器函数,让它按顺序不停循环。
                aImages[index].className = '';            
                aTabs[index].className = '';
                index++;
                if(index>=6)        //总共的图片只有6张，当走到第七张时，让他回到第一张图片
                {
                    index=0;
                };
                aImages[index].className = 'on';
                aTabs[index].className = 'on';
                console.log('你点击了鼠标',aImages[index]);
            },4000)
        }
        oBtnRight.onclick = function (){            //监听鼠标点击右箭头
            aImages[index].className = '';          //图片翻过后，清除上一张图片的'on'类名
            aTabs[index].className = '';
            index++;
            if(index>=6)
            {
                index=0;
            }
            aImages[index].className = 'on';
            aTabs[index].className = 'on';
            console.log('你点击了鼠标',aImages[index]);
        }
        oBtnLeft.onclick = function () {
            aImages[index].className = '';
            aTabs[index].className = '';
            index--;
            if(index<0)
            {
                index=5;
            }
            aImages[index].className = 'on';
            aTabs[index].className = 'on';
        }
    </script>
</body>
</html>