jQuery结合flex能够碰撞出什么样的火花呢？

web前端群，189394454，有视频、源码、学习方法等大量干货分享

效果知识点：HTML布局思想, div盒子模型, flex弹性布局, 新老布局分析对比 ,jQuery插件使用,jQuery动画与控制台操作,动画序列,前端学习思维分享。

👇html代码：

    <div id='wrap'>
            <ul>
                <li>
                    <img src='images/1.jpg' width='1920' height='1080' alt='测试'>
                </li>
                <li>
                    <img src='images/2.jpg' width='1920' height='1080' alt='测试'>
                </li>
                <li>
                    <img src='images/3.jpg' width='1920' height='1080' alt='测试'>
                </li>
                <li>
                    <img src='images/4.jpg' width='1920' height='1080' alt='测试'>
                </li>
                <li>
                    <img src='images/5.jpg' width='1920' height='1080' alt='测试'>
                </li>
                <li>
                    <img src='images/6.jpg' width='1920' height='1080' alt='测试'>
                </li>
                <li>
                    <img src='images/7.jpg' width='1920' height='1080' alt='测试'>
                </li>
                <li>
                    <img src='images/8.jpg' width='1920' height='1080' alt='测试'>
                </li>
                <li>
                    <img src='images/9.jpg' width='1920' height='1080' alt='测试'>
                </li>
                <li>
                    <img src='images/10.jpg' width='1920' height='1080' alt='测试'>
                </li>
                <li>
                    <img src='images/11.jpg' width='1920' height='1080' alt='测试'>
                </li>
                <li>
                    <img src='images/12.jpg' width='1920' height='1080' alt='测试'>
                </li>
            </ul>
            <div class='console'>
                <span class='prev'></span>  
                <span class='grid'></span>  
                <span class='next'></span>  
            </div>
        </div>

👇css代码：

        <style> /*css样式库 衣柜 统一存放标签的样式*/
            *{  /*通配符选择器*/
                margin:0; /*清除默认外边距*/
                padding:0; /*清除默认内边距*/
            }
            body{ /*标签选择器*/
                background:#000; 
            }
            #wrap{ /*id选择器 #+id名称 +{}*/
                
                width:1200px;       /*属性名称 : 属性值 单位 ;*/
                height:580px;       /*设置高度*/
                
                margin:50px auto; /*外边距 上下50px 左右自动(居中)*/
            }
            #wrap ul{
                display:flex; /*开启弹性盒模型布局模式*/
                justify-content:space-around;/*设置主轴方向排列模式*/
                align-items:center; /*辅轴的排列方式 居中*/
                flex-wrap:wrap;/*设置排列换行 强制换行*/
                width:100%;  /*百分比设置宽度*/
                height:90%; 
            }
            #wrap ul li{
                list-style:none; /*默认列表索引样式清除*/
                width:288px; 
                height:162px;
                border:1px solid #222; /*边框线 粗细 样式 颜色*/
                cursor:pointer;/*手指*/
            }
            #wrap ul li img{
                display:block; /*成块级别元素显示 结构性*/
                width:100%;
                height:100%;
            }
            
            #wrap .console{
                display:flex;
                flex-dirction:row; /*设置主轴排列方式*/
                justify-content:space-around; 
                align-items:center;
                width:100%;
                height:10%;
        
            }

            #wrap .console span{
                display:block;
                width:45px;
                height:45px;
                background:url('images/console.png') no-repeat;
                cursor:pointer; /*设置鼠标样式*/
            }
            #wrap .console span.prev{
                background-position:-28px center;
            }
            #wrap .console span.grid{
                background-position:8px center;
            }
            #wrap .console span.next{
                background-position:-68px center;
            }
        </style>

👇javascript代码：

<script src='js/jQuery.js'></script>
    <script>  //JavaScript是一门基于原型的动态解释性脚本语言
        var $li = $('#wrap ul li'); //获取li标签集合 12个li标签的集合
        var length=$li.length; //获取li的个数 12
        var $next=$('.next');  //获取下一张按钮
        var $prev=$('.prev');  //获取上一张按钮
        
        /* 谁 在什么时候/触发了什么事件  谁做了什么事情 */
        // li          被点击 .click()   function(){}

        /*
            点击li 让所有的li按照序号依次小时
            fadeOut 淡出隐藏 fadeIn 淡入 eq下标所引起器

            点击下一张  让index++;
        
        */
        var index=0;  //初始化被选择的li的下标 从零开始数
        $li.click(function(){
            index=$(this).index(); //获取当前点击的li的下标
            $li.each(function(ix){  //让所有的li按照顺序做一件事
                $(this).delay(ix*30).fadeOut(30);
            });
            play();
        });
        $next.click(function(){
            index++;
            index%=length; 
            //0%12 0 ... 1%12 1 10%12 10 11%12 11 12%12 0 13%12 1
            play();
        });
        $prev.click(function(){
            index--;
            index=index<0?length-1:index;
            play();
        });
        function play(){ //函数封装 方便多次使用
            $li.eq(index).fadeIn(300).animate({
                        width:'90%',
                        height:'90%'
            },300).siblings('li').css({
                        width:'288px',
                        height:'162px'
            }).fadeOut(300); //指定下标的li显示出来
        }
    </script>