zoukankan      html  css  js  c++  java
  • 前端插件--swiper.js

    使用swiper.js还要注意引入它的同时也要引入swiper.css样式文件:

    swiper官方文档:http://www.swiper.com.cn/api/effects/193.html

    实例:

    示例代码:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <link rel="stylesheet" href="./css/swiper.css">
     7     <style>
     8         *{
     9             padding: 0;
    10             margin: 0;
    11         }
    12         ul{
    13             list-style: none;
    14         }
    15         .swiper-container {
    16              600px;
    17             height: 300px;
    18             box-sizing: border-box;
    19         }
    20         .swiper-slide > a{
    21              100%;
    22             display: block;
    23         }
    24         .swiper-slide > a > img{
    25              100%;
    26             display: block;
    27         }
    28     </style>
    29     <script src="./js/swiper.js"></script>
    30 </head>
    31 <body>
    32 <!--需要的是下面这样的结构,而不是下面这样的标签,意味着标签名称可以随意-->
    33 <div class="swiper-container">
    34     <ul class="swiper-wrapper">
    35         <li class="swiper-slide">
    36             <a href="javascript:;">
    37                 <img src="./images/l1.jpg" alt="">
    38             </a>
    39         </li>
    40         <li class="swiper-slide">
    41             <a href="javascript:;">
    42                 <img src="./images/l2.jpg" alt="">
    43             </a>
    44         </li>
    45         <li class="swiper-slide">
    46             <a href="javascript:;">
    47                 <img src="./images/l3.jpg" alt="">
    48             </a>
    49         </li>
    50         <li class="swiper-slide">
    51             <a href="javascript:;">
    52                 <img src="./images/l4.jpg" alt="">
    53             </a>
    54         </li>
    55         <li class="swiper-slide">
    56             <a href="javascript:;">
    57                 <img src="./images/l5.jpg" alt="">
    58             </a>
    59         </li>
    60         <li class="swiper-slide">
    61             <a href="javascript:;">
    62                 <img src="./images/l6.jpg" alt="">
    63             </a>
    64         </li>
    65         <li class="swiper-slide">
    66             <a href="javascript:;">
    67                 <img src="./images/l7.jpg" alt="">
    68             </a>
    69         </li>
    70         <li class="swiper-slide">
    71             <a href="javascript:;">
    72                 <img src="./images/l8.jpg" alt="">
    73             </a>
    74         </li>
    75     </ul>
    76 </div>
    77 <script>
    78     var mySwiper = new Swiper('.swiper-container', {
    79         autoplay:2000,//可选选项,自动滑动
    80         loop : true,
    81         effect : 'cube',
    82     })
    83 </script>
    84 </body>
    85 </html>
  • 相关阅读:
    ntp时钟同步
    Office2013中文激活版
    Windows2008|2003超出最大连接数
    Vivaldi浏览器媲美Chrome
    Win10激活KMS2.0
    FTP下载工具
    UltraEdit编辑器|UE
    社工-入侵
    实时系统跟分时系统
    ThreadPoolExecutor线程池解析与BlockingQueue的三种实现
  • 原文地址:https://www.cnblogs.com/mrszhou/p/8289948.html
Copyright © 2011-2022 走看看