轮播图之透明度变化版

html 结构部分

    <div class="banner-box">
        <div class="banner">
            <ul>
                <li class="active"><a href="javascript:viod(0);"><img src="./img/01.jpg" alt=""></a></li>
                <li><a href="javascript:viod(0);"><img src="./img/02.jpg" alt=""></a></li>
                <li><a href="javascript:viod(0);"><img src="./img/03.jpg" alt=""></a></li>
                <li><a href="javascript:viod(0);"><img src="./img/04.jpg" alt=""></a></li>
                <li><a href="javascript:viod(0);"><img src="./img/05.jpg" alt=""></a></li>
            </ul>
            <ol>

            </ol>
            <div class="btn">
                <div class="btn-left"><<<</div>
                <div class="btn-right">>>>></div>
            </div>
        </div>
    </div>

css 部分

        ul ,ol{
   
            list-style: none;
        }
        *{
   
            padding: 0;
            margin: 0;
        }
        .banner-box {
   
            position: relative;
            width: 785px;
            height: 430px;
            border: 1px solid #ccc;
            margin: 2