轮播图

末蓝、 2021-06-10 20:38 676阅读 0赞

方案1  
初始化插件：

slides是一款基于jQuery无缝轮播图插件,支持图内元素动画，可以自定义动画类型

html代码

js代码

方案二使用Swiper

Swiper常用于移动端网站的内容触摸滑动  
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。  
从官方中copy过来的Demo,有兴趣可以看看，里面包括了js和css [传送门][Link 1]

首先需要引入相应的css和Js

代码如下

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <title>Swiper demo</title>
      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    
      
      <link rel="stylesheet" href="../package/swiper-bundle.min.css">
    
      
      <style>
        html,
        body {
          position: relative;
          height: 100%;
        }
    
        body {
          background: #eee;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-size: 14px;
          color: #000;
          margin: 0;
          padding: 0;
        }
    
        .swiper-container {
          width: 100%;
          height: 100%;
        }
    
        .swiper-slide {
          background-position: center;
          background-size: cover;
        }
      </style>
    </head>
    
    <body>
      
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" style="background-image:url(./images/nature-1.jpg)"></div>
          <div class="swiper-slide" style="background-image:url(./images/nature-2.jpg)"></div>
          <div class="swiper-slide" style="background-image:url(./images/nature-3.jpg)"></div>
        </div>
        
        <div class="swiper-pagination swiper-pagination-white"></div>
        
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
      </div>
    
      
      <script src="../package/swiper-bundle.min.js"></script>
    
      
      <script>
        var swiper = new Swiper('.swiper-container', {
          spaceBetween: 30,
          effect: 'fade',
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        });
      </script>
    </body>
    
    </html>

效果图为  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FkbWluUHdk_size_16_color_FFFFFF_t_70]

[Link 1]: https://download.csdn.net/download/AdminPwd/13753609
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FkbWluUHdk_size_16_color_FFFFFF_t_70]: /images/20210522/85f7f914d6eb444588b63f7125fdb08e.png