在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 為什么jq fadein第一次運行會白屏？

為什么jq fadein第一次運行會白屏？

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <style type="text/css">
            ul,
            li,
            body {
                margin: 0;
                padding: 0;
            }
            
            li {
                list-style: none;
            }
            
            .flow img {
                width: 500px;
                height: 200px;
                display: block;
            }
            
            #wrap {
                position: relative;
            }
            
            #wrap .flow {
                position: relative;
            }
            
            #wrap .flow li {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }
            
            #wrap .left,
            .right {
                width: 30px;
                height: 30px;
                border-radius: 30px;
                border: 1px solid #fff;
                line-height: 30px;
                text-align: center;
                cursor: pointer;
                position: absolute;
                top: 50%;
                margin-top: -15px;
                color: #fff;
            }
            
            #wrap .left:hover,
            .right:hover {
                background-color: #ccc;
            }
            
            .left {
                left: 10px;
            }
            
            .right {
                right: 10px;
            }
            
            #wrap .list {
                position: absolute;
                bottom: 10px;
                left: 50%;
                transform: translateX(-50%);
            }
            
            #wrap .list>li {
                width: 40px;
                height: 10px;
                border: 1px solid #ccc;
                border-radius: 7px;
                margin-left: 10px;
                float: left;
                cursor: pointer;
            }
            
            .color {
                background-color: #fff;
            }
        </style>
    </head>

    <body>
        <div id="wrap">
            <ul class="flow">
                <li>
                    <img src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" alt="">
                </li>
                <li>
                    <img src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" alt="">
                </li>
                <li>
                    <img src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg" alt="">
                </li>
                <li>
                    <img src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg" alt="">
                </li>
            </ul>
            <div class="left">&lt;</div>
            <div class="right">></div>
            <ul class="list">
                <li class="color"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <script>
            var $wrap = $('#wrap');
            var flow = $('#wrap .flow');
            var oli = $('#wrap .flow li');
            var len = oli.length;
            var oimgAll = $('#wrap .flow li img');
            var oleft = $('.left');
            var oright = $('.right');
            var index=0;
            var img = oli.first().children();
            flow.css({
                'width': img.width(),
                'height': img.height()
            })
            $wrap.css({
                'width': img.width(),
                'height': img.height()
            })
            oright.on('click', function() {
                display()
            })

            function display() {
                index=index+1;
                oli.fadeOut('100');
                console.log(index);
                oli.eq(index).fadeIn('100');
            }
        </script>
    </body>

</html>

如問題所示，為什么第一次運行會白屏一下？如何解決這個問題呢？

回答
編輯回答
有你在

初始化的時候加一下

oli.css('display', 'none');
oli.eq(0).css('display', 'block');
2018年2月13日 15:18