zoukankan      html  css  js  c++  java
  • Swiper 滑动切换图片(可用于PC端,移动端)

    作为一名后端的普通程序猿, 你让我搞这种前端不是跟我玩命吗,所以用插件来搞,省事又简单,而且Swiper使用又简单是吧;

    头皮发麻,不喜欢说废话,我更喜欢直接看到效果;

    按Swiper官方文档来说, 它需要配合JQuery来使用,所以也需要引入JQ;

    1, 先去官网下载一波它的 CSS, JS 文件先,https://2.swiper.com.cn/download/index.html#file1

       下载完直接引入即可上手用了, 路径自己改。

    <link rel="stylesheet" href="css/swiper.min.css">
    
    <script src="js/swiper.min.js"></script>
    

    2, 废话不多说, 直接上测试例子;

      HTML(swiper的写法):

      container: 装所有滑动slide的容器

      <!-- Swiper -->
      <div class="swiper-container"> 
        <div class="swiper-wrapper">
        <div class="swiper-slide blue-slide">内容1</div>
        <div class="swiper-slide red-slide">内容2</div>
        <div class="swiper-slide orange-slide">内容3</div>
        <div class="swiper-slide blue-slide">内容4</div>
        <div class="swiper-slide orange-slide">内容5</div>
      </div>

         

      CSS(这个按自己喜欢来调, 例子当然是越简单越好):

      <!-- Demo styles -->
      <style>
        * {
          margin: 0;
          padding: 0;
          }
          .blue-slide {
              background: #4390EE;
          }
          .red-slide {
              background: #CA4040;
          }
          .orange-slide {
              background: #FF8604;
          }
          .swiper-slide {
              line-height: 300px;
              color: #fff;
              font-size: 36px;
              text-align: center;
          }
      </style>

      

      JS

      如果只是简单做轮播图,autoplay 和 loop 这两个参数即可;

      里面的注释我已经写好了, 更多的参数或者功能可以去官网找下即可;

      <!-- Initialize Swiper -->
      <script>
      var mySwiper = new Swiper('.swiper-container',{
        loop : true, // 形成环路,不断循环, 跟autoplay可组成轮播图
        autoplay: {
              delay: 1000,//1秒切换一次
        },
        initialSlide: 2, // 一开始就放到所有中间的位置
        slidesPerView: 3, // slider容器能够同时显示的slides数量
        centeredSlides: true, // 默认状态下slide居左,但是居左有问题,取到的slide下标有误,一般设为true:居中
        slideToClickedSlide: true, // 点击slide会过渡到这个slide
        effect : 'coverflow', // 切换效果, coverflow:3D流 (可选)
        coverflowEffect: { // 切换效果的参数
          rotate: 0,
          stretch: 5,
          depth: 60,
          modifier: 2,
          slideShadows : true
        },
        on:{
          click:function(){ 
            alert(this.clickedIndex); //当前点击的是第几张
          },
          transitionEnd: function(event){
            img_index = this.activeIndex; //滑动到第几张
          },
        }
      });
      </script>

     效果如下

      

  • 相关阅读:
    Atlas
    MHA高可用
    Mycat 读写分离
    数据库 基于GTID主从复制
    DHCP服务
    python垃圾回收机制
    深拷贝、浅拷贝、引用(总结)
    python内存管理机制
    web安全-横向越权与纵向越权
    登录功能SQL注入
  • 原文地址:https://www.cnblogs.com/pyspang/p/10081974.html
Copyright © 2011-2022 走看看