swiper实现图文组合轮播幻灯片代码-html代码-BFW代码库

代码语言：html
所属分类：幻灯片
代码描述：swiper实现图文组合轮播幻灯片代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>

<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">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper.min.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/swiper.4.5.1.js"></script>
    <style>
        @charset "utf-8";
    *{ box-sizing:border-box; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none;}
    *:focus { outline: none; }
    html {  -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100%;}
    body { margin: 0;font-size:14px;line-height:1.5;  font-family:"΢���ź�",microsoft yahei; color:#333; background:#fff; }
    body, div, span, object, iframe, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, q, dl, dt, dd, ol, ul, li, fieldset, form, legend, caption, tbody, tfoot, thead, article, aside, dialog, figure, footer, header, hgroup, nav, section{ padding:0; margin:0;}
    img {  border: 0;vertical-align: middle; max-width:100%;}
    .clearfix:after{ content:""; display:block; clear:both; height:0; visibility:hidden;}
    .clearfix{ zoom:1;}
    
    .sec1{background: #f2f2f2;}
    .main{max-width:1200px; margin:0 auto; padding:40px 0;}
    .title{font-size:24px; margin-bottom: 1em; text-align: center;}
    .img-count,.img-count img{position:relative;}
    .img-count-in{ position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden;height:100%; *height:100%;}
    
    .w-newsList1{position: relative;}
    .w-newsList1 a{ display: block; text-decoration: none; color: #333;}
    .w-newsList1 .news-item{ position:relative;}
    .w-newsList1 .news-imgbox{ width:58%;}
    .w-newsList1 .news-imgbox img{ transition:transform 3.5s; -webkit-transition:transform 3.5s;transform:scale(1.1); -webkit-transform:scale(1.1);}
    .w-newsList1 .swiper-slide.swiper-slide-active .news-imgbox img{ transform:scale(1); -webkit-transform:scale(1);}
    .w-newsList1 .aspectRatio{padding-bottom:450px;}
    .w-newsList1 .news-text{ position: absolute; right:0; width:50%; top: 50%;top:10%\9; *top:10%; transform:translateY(-50%); -webkit-transform:translateY(-50%); background: #fff; padding: 30px 15px 40px 4%; overflow:hidden;}
    :root .w-newsList1 .news-text{ top:50%;}
    .w-newsList1 .date{ line-height: 1.4; margin-bottom: 0.8em;}
    .w-newsList1 .date .year{ font-size:46px; font-weight: bold; color: #000; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;}
    .w-newsList1 .date .day_month{font-size:17px; color: #bebebe;}
    .w-newsList1 .news-h{font-size:24px; font-weight: bold; line-height: 1.4; height:2.8em; overflow: hidden; margin-bottom: 0.3em;}
    .w-newsList1 .news-sum{ line-height: 1.8; height:3.5em; overflow: hidden; color:#aaa;}
    .w-newsList1 .more{margin-top:20px; width: 45px; height: 24px; float: right; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAQCAYAAAAFzx/vAAABIUlEQVQ4jb3VMUscQRQH8J+yNgaLFAoPJSBnKaTRUhDBRoiVpBG09mMIljY2geuCIH4GG7FKE7BRSxGPyCtstLJQxGYPTr1D3LvNHxb2McP7McPO7FCz2dRPMhNExDec4gormXnbbf5wX9rrjOEr5nAcEeO1gpl5gQ08Y7YXOsgVysyDLuhEbWAP9E9ETNUGdqBreEQDJ220wBfMYKhK84joNXSFHWx3oIsFzjBdBftkGjgaxsN/wNoZLfAdkypu6QdZxV75foPlAk+4rtqxfdO8TUT8xG5ZXmIpM1u1fKURsY5DjJTYYma2qOFYRMQm9sve51jIzH/t8YGCEbGF3x3YUr7Z84GBETGPX2X5t8Te/TGKQYG4K58z/MjM+26TXgDh8VYjv3NjTgAAAABJRU5ErkJggg==") center no-repeat;}
    .w-newsList1 .adSN_page{ position: absolute; z-index: 9; left:50%; bottom:50%; margin-bottom: -123px; top: auto; transform: none; -webkit-transform: none; width:35%; padding-left: 4%; }
    .w-newsList1 .adSN_page span{ display: inline-block; *display:inline; *zoom:1; margin:0 6px;}
    .w-newsList1 .swiper-num{ position: absolute; z-index: 9; right: 15px; top:50%; margin-top: -130px; color: #bebebe;}
    .w-newsList1 .swiper-num .active{ font-size:32px; font-weight: bold;}
    
    .w-newsList2{position: relative; overflow:hidden;}
    .w-newsList2 a{ display: block; text-decoration: none; color: #333;}
    .w-newsList2 .news-item{ position:relative;}
    .w-newsList2 .img{ float: right; width:52%; overflow: hidden;}
    .w-newsList2 .img img{transition:transform 3.5s; -webkit-transition:transform 3.5s;transform:scale(1.1); -webkit-transform:scale(1.1);}
    .w-newsList2 .swiper-slide.swiper-slide-active .img img{ transform:scale(1); -webkit-transform:scale(1);}
    .w-newsList2 .news-text{ margin-right:56%;}
    .w-newsList2 .news-h{font-size:28px; line-height: 1.4; margin-bottom: 1em;}
    .w-newsList2 .news-sum{margin-top:30px; line-height: 1.8; color:#808080;}
    .w-newsList2 .more{position: absolute; left: 0; bottom: 1em; line-height: 2.8; padding: 0 3em; border:1px solid #aaa; color:#333;overflow: hidden; -webkit-transition: all .6s;transition: all .6s;}
    .w-newsList2 .more:hover{color:#fff; border-color:#FF6600;}
    .w-newsList2 .more .bgsqr1,.w-newsList2 .more .bgsqr2,.w-newsList2 .more .bgsqr3,.w-newsList2 .more .bgsqr4{background:#FF6600;position: absolute;top:0; width: 0px;height: 100%;-webkit-transition: all 0.4s; transition: all 0.4s; opacity:0.35;}
    .w-newsList2 .more .bgsqr3,.w-newsList2 .more .bgsqr4{ opacity:0.75;}
    .w-newsList2 .more .bgsqr1{ left:0;}
    .w-newsList2 .more .bgsqr2{ right:0}
    .w-newsList2 .more .bgsqr3{ right:0;}
    .w-newsList2 .more .bgsqr4{ left:0;}
    .w-newsList2 .more:hover .bgsqr1,.w-newsList2 .more:hover .bgsqr2,.w-newsList2 .more:hover .bgsqr3,.w-newsList2 .more:hover .bgsqr4{ width:100%;}
    .w-newsList2 .more:hover .bgsqr3,.w-newsList2 .more:hover .bgsqr4{-webkit-transition-delay:.4s;transition-delay:.4s;}
    .w-newsList2 .more span{ position:relative; z-index:1;}
    .w-newsList2 .adSN_page{ position: absolute; left: auto; right:10px; width: auto; z-index: 10; text-align: right; }
    .w-newsList2.swiper-container-horizontal .adSN_page{bottom:20px;}
    .w-newsList2 .adSN_page span{ background: #c9c9c9; opacity: 1; width:40px; height: 5px; border-radius: 0; -webkit-border-radius: 0;}
    .w-newsList2 .adSN_page span.swiper-pagination-bullet-active{background: #f60;}
    .w-newsList2.swiper-container-vertical .adSN_page span{margin:15px 0;}
    
    @media (max-width:960px){
    	.w-newsList2 .news-h{font-size:24px;}
    	.w-newsList2 .news-sum{ display: none;}
    }
    @media (max-width:767px){
        .w-newsList1 .news-imgbox{width:100%;}
    	.w-newsList1 .aspectRatio{padding-bottom: 56.25%;}
    	.w-newsList1 .news-text{ position: relative; width:100%; top:0; transform: none; -webkit-transform: none; padding:1.2em 4% 1.5em;}
    	:root .w-newsList1 .news-text{ top:0;}
    	.w-newsList1 .adSN_page{ left:0; bottom:2em; margin-bottom: 0;}
    	.w-newsList1 .swiper-num{ bottom: 232px; top: auto; margin-top: 0;}
    
    	.w-newsList2 .news-h{font-size:20px;}
    	.w-newsList2 .img{float: none; width:100%;}
    	.w-newsList2 .news-text{margin-right: 0; text-align: center; padding:1em 0 3em;}
    	.w-newsList2 .more{position: relative; margin-top:1.2em; bottom: 0; display: inline-block;}
    	.w-newsList2 .adSN_page{ top: auto; bottom: 0 !important; left: 0; right: 0 ; transform: none; -webkit-transform: none; text-align: center;}
    	.w-newsList2 .adSN_page span{margin:0 0.3em !important; display: inline-block; width:1.8em; height: 0.25em;}
    }
    @media (max-width:480px){
        body{font-size:4vw;}
        .title{font-size:6vw;}
        .w-newsList1 .news-h{font-size:125%;}
    	.w-newsList1 .date .year{ font-size:300%;}
    	.w-newsList1 .date .day_month{ font-size: 110%;}
    	.w-newsList1 .swiper-num{ bottom: 15em;}
    	.w-newsList1 .swiper-num .active{ font-size: 200%;}
    
    	.w-newsList2 .news-h{font-size:125%;}
    }
    </style>
</head>

<body>
    <section class="sec1">
        <div class="main">
            <div class="title">基于swiper的新闻滚动组合1</div>
            <div class="w-newsList w-newsList1 clearfix" id="newsList1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="news-item">
                            <a href="#" class="clearfix">
                                <div class="news-imgbox img-count">
                                    <div class="aspectRatio"></div>
                                    <div class="img-count-in"><img src="//repo.bfw.wiki/bfwrepo/image/62aa847a293dd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90"></div>
                                </div>
                                <div class="news-text">
                                    <div class="date">
                                        <div class="year">2020</div>
                                        <div class="day_month">07-01</div>
                                    </div>
                                    <div class="news-h">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题1</div>
                                    <div class="news-sum">文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介介文字简介文字简介文字简介文字简介</div>
                                    <div class="more"></div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="news-item">
                            <a href="#" class="clearfix">
                                <div class="news-imgbox img-count">
                                    <div class="aspectRatio"></div>
                                    <div class="img-count-in"><img src="//repo.bfw.wiki/bfwrepo/image/62aa83bbd6192.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90"></div>
                                </div>
                                <div class="news-text">
                                    <div class="date">
                                        <div class="year">2020</div>
                                        <div class="day_month">07-01</div>
                                    </div>
                                    <div class="news-h">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标.........完整代码请登录后点击上方下载按钮下载查看