SOURCE

console 命令行工具 X clear

                    
>
console
		~function ($) {
		    let computed = ()=> {
		        let $HTML = $(document.documentElement),
		            winW = $HTML[0].clientWidth,
		            value = 100;
		        value = winW < 640 ? winW / 640 * 100 : value;
		        $HTML.css('fontSize', value);
		    };
		    computed();
		    $(window).on('resize', computed);
		}(Zepto);	
			
		 let bannerExample = new Swiper('.bannerBox', {
	            autoplay: 3000,
	            autoplayDisableOnInteraction: false,
	            loop: true,
	            pagination: '.swiper-pagination',
	            paginationType: 'fraction',
	
	            //=>有关于图片延迟加载的
	            lazyLoading: true,
	            lazyLoadingInPrevNext: true
	     });
	     
	    let  liveExample = new Swiper('.liveCon', {
            direction: 'vertical',
            autoplay: 3000,
            loop: true,
            onlyExternal: true //=>不能手动拖拽
        });
<!--BANNER-->
    <section class="swiper-container bannerBox">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <a href="#">
                    <img src="https://img1.360buyimg.com/da/s828x404_jfs/t19783/347/2056428700/119568/f9e2527/5ae1a378Naf88ce12.jpg!cr_1125x549_0_72.dpg" alt="">
                    <p>岳云鹏网店上黑榜</p>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="#">
                    <img src="https://img1.360buyimg.com/da/s826x404_jfs/t19171/85/1943477250/98705/bd8a0c4c/5adec45eN1662ac23.jpg!cr_1125x549_0_72.dpg" alt="">
                    <p>港大新药清除艾滋</p>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="#">
                    <img src="https://m.360buyimg.com/mobilecms/s828x404_jfs/t18301/77/2024136805/184874/220751b2/5ae14855Nbcb04e73.jpg!cr_1125x549_0_72!q70.jpg.dpg" alt="">
                    <p>阿里投资人离职</p>
                </a>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </section>
	    
<!--Live-->	    
<section class="liveBox">
    <span class="tag"></span>
    <div class="swiper-container liveCon">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><a href="#">岳云鹏网店上黑榜</a></div>
            <div class="swiper-slide"><a href="#">港大新药清除艾滋</a></div>
            <div class="swiper-slide"><a href="#">阿里投资人离职</a></div>
            <div class="swiper-slide"><a href="#">央行严批支付乱象</a></div>
        </div>
    </div>
</section>

<link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.2.2/css/swiper.css" />
<script src="https://cdn.bootcss.com/Swiper/3.4.1/js/swiper.js"></script>
			*{margin: 0; padding:0 ;}
			ul,li{
				list-style: none;
			}
			html {
				  font-size: 100px; /*640PX:1REM=100PX*/
				 overflow-x: hidden;
				}
				
			.bannerBox {
			  position: relative;
			  height: 3.4rem;
			  }

			  .swiper-wrapper, .swiper-slide {
			    height: 100%;
			  }
			
			  .swiper-slide {
			    position: relative;
			}
			   .swiper-slide  a {
			      display: block;
			      width: 100%;
			      height: 100%;}

		    .swiper-slide  a   img {
		        display: block;
		        width: 100%;
		        height: 100%;
		      }

		    .swiper-slide  a   p {
		        position: absolute;
		        left: 0;
		        bottom: 0;
		        z-index: 1;
		        width: 100%;
		        height: .6rem;
		        line-height: .6rem;
		        text-indent: .2rem;
		
		        color: @white;
		        font-size: .28rem;
		        background: rgba(0, 0, 0, .5);
		      }
    /*  //=>修改SWIPER默认的样式(分析出它具备的样式类,然后我们自己重写即可)*/
		  .swiper-pagination {
		    position: absolute;
		    left: auto;
		    right: 0;
		    bottom: 0;
		    z-index: 10;
		    width: 1rem;
		    height: .6rem;
		    line-height: .6rem;
		    text-align: center;
		    font-size: .28rem;
		    color: rgba(255, 255, 255, 0.5);
		
		    
		  }
		  .swiper-pagination span:nth-of-type(1) {
		        font-weight: bold;
		        color: @white;
		      }
		      
		  .liveBox{
		  	
		  }  
		  
		  .liveBox {
		    position: relative;
		    margin: .16rem 0;
		    height: 0.8rem;
		    background: #FFF;
		    font-size: 0.2rem;
		    overflow: hidden;
		}