swiper实现图文组合轮播幻灯片代码

代码语言:html

所属分类:幻灯片

代码描述:swiper实现图文组合轮播幻灯片代码

代码标签: 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:sca.........完整代码请登录后点击上方下载按钮下载查看

网友评论0