js 编写呼吸轮播特效 过度，opacity: 1; transition: opacity 0.5s ease 0s; 注意：子绝父相。

发表于 作者 jiukeshuju 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        #box {
            position: relative;
            margin: 0 auto;
            width: 900px;
        }
        
        #box ul li {
            list-style: none;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 0.5s ease 0s;
        }
        
        #box ul li:first-child {
            opacity: 1;
        }
        
        #lr {
            position: relative;
            top: 300px;
            left: 500px;
        }
    </style>
    <div id="box">
        <ul id="ula">
            <li><img src="images/11.jpg" alt=""></li>
            <li><img src="images/22.jpg" alt=""></li>
            <li><img src="images/33.jpg" alt=""></li>
            <li><img src="images/44.jpg" alt=""></li>
            <li><img src="images/55.jpg" alt=""></li>
        </ul>

    </div>
    <div id="lr">
        <a href="javascript:;" id="lt">11</a>
        <a href="javascript:;" id="rt">22</a>
    </div>
    <script>
        var lt = document.getElementById('lt');
        var rt = document.getElementById('rt');
        var lis = document.getElementsByTagName('li');

        var idx = 0;

        rt.onclick = function() {

            lis[idx].style.opacity = 0;
            idx++;
            if (idx > 4) idx = 0;
            lis[idx].style.opacity = 1;
        }

        lt.onclick = function() {
            lis[idx].style.opacity = 0;
            idx--;
            if (idx < 0) idx = 4;
            lis[idx].style.opacity = 1;
        }
    </script>
</body>

</html>

发表评论