<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="css/swiper.css"/>

        <style type="text/css">

            .swiper-container{

                width: 600px;

                height: 300px;

                margin: 0 auto;

                border:1px solid #ccc

            }

            .h1{

                background: skyblue;

                transition: all 2s;

            }

            .h2{

                background: pink;

                transform: translate(-300px,0);

                opacity: 0;

            }

            .h2huaru{

                animation: huaru 3s;

            }

            @keyframes huaru{

                from{transform: translate(-300px,0);opacity: 0;}

                to{transform: translate(0,0);opacity: 1;}

            }

        </style>

    </head>

    <body>

        <div class="swiper-container">

            <div class="swiper-wrapper">

                <div class="swiper-slide">Slide 1</div>

                <div class="swiper-slide">

                    <h1 class="h1">slide 2</h1>

                    <h2 class="h2">这是1个划入动画</h2>

                </div>

                <div class="swiper-slide">Slide 3</div>

            </div>

            <!-- 如果需要分页器 -->

            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->

            <div class="swiper-button-prev"></div>

            <div class="swiper-button-next"></div>

            <!-- 如果需要滚动条 -->

            <!--<div class="swiper-scrollbar"></div>-->

        </div>

        <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>

        <script src="js/swiper.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            var selector = '.swiper-container'

            var config = {

                direction:'horizontal',

                loop: true,

                autoplay:true,

                // 如果需要分页器

                pagination: {

                  el: '.swiper-pagination',

                },

                // 如果需要前进后退按钮

                navigation: {

                  nextEl: '.swiper-button-next',

                  prevEl: '.swiper-button-prev',

                },

                // 如果需要滚动条

//                scrollbar: {

//                  el: '.swiper-scrollbar',

//                },

                on:{

                    slideChange:function(){

//                        console.log(this)

                        if(this.activeIndex == 2){

                            $('h1').css({

                                background:'pink'

                            })

                            $('.h2').addClass('h2huaru')

                        }

                    }

                }

              }

            var mySwiper = new Swiper (selector,config)

        </script>

    </body>

</html>

swiper轮播的更多相关文章

  1. 视频swiper轮播

    关于本次文章的内容,实际上是咪咕阅读详情页中的一个前端需求要做的效果,不过比起原需求,此次案例已经被删减掉许多部分了.音频部分舍弃,调用客户端接口舍弃,并做一些整理.最后留下的是这个精简版的案例.方便 ...

  2. swiper轮播问题之一：轮播图内容为动态数据生成时轮播图无法自动轮播

    本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助.        首先,new Swiper的初始化最 ...

  3. 使用Swiper轮播插件引起的探索

    提到Swiper轮播插件,小伙伴们应该不会感到陌生.以前我主要在移动端上使用,PC端使用较少. 注:这里需要注意的是,在PC端和移动端使用Swiper是不同的 官方给的版本有三个,分别是Swiper2 ...

  4. swiper轮播在ie浏览器上遇到的显示问题探索

    前言: 最近项目有一个需求,想要下图效果,鼠标指向头像图片,图片会放大同时上面的轮播会跟着切换: 鼠标移开头像图片,图片变回原来的大小 注:下图是我根据上面需求已经实现的效果,所以截图方便说明 思考: ...

  5. swiper轮播图（逆向自动切换类似于无限循环）

    swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高, ,不过还是能够用swiper本身的特性更改成无限循环 ...

  6. Swiper轮播图

    今天咱们来说一下.Swiper轮播图. 超级简单的: 翠花,上代码:   <!DOCTYPE html>   <html lang="en">   < ...

  7. 微信小程序_(组件)swiper轮播图

    微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...

  8. Swiper轮播隐藏再显示后不动

    公告用Swiper轮播方式,在某些不需要显示公告的页面进行隐藏,在需要展示公告的页面进行显示时候,公告不能正常轮播,在条件里加入重新设置轮播方法等网上的一些方法仍然不行,最后解决方法: this.my ...

  9. Swiper轮播手动后不动

    最近项目首页轮播图用了Swiper轮播,今天突然发现轮播图动画初始正常但是手动换过之后就不动了,解决方法有两种,具体根据采用的情况为准: 1.autoplayDisableOnInteraction: ...

  10. 一个页面多个bootstrip轮播以及一个页面多个swiper轮播 冲突问题

    Bootstript轮播冲突 解决方法: 使用不同的id <div id="myCarousel1" class="carousel slide"> ...

随机推荐

  1. Object的wait、notify和notifyAll

    Obect的wait.notify 和 notifyAll是Object提供的同步方法,也就是所有对象都生而带来的方法,估计搞java的没有不知道这几个方法的.那么他究竟是怎么使用的呢?在此处记录一下 ...

  2. ViewModel 和 ViewModelProvider.Factory：ViewModel 的创建者

    本文翻译自:https://medium.com/koderlabs/viewmodel-with-viewmodelprovider-factory-the-creator-of-viewmodel ...

  3. Java静态代理&动态代理&Cglib代理详解

    一.静态代理 根据被代理的类的时机的不同,如果在编译阶段就能确定下来的被代理的类是哪一个,那么,就可以使用静态代理的方式. 申明一个接口: /** * @author jiaqing.xu@hand- ...

  4. 正睿OI国庆day1

    正睿OI国庆day1 T1 \[ S_n=1*S_{n-1}+1*F_{n-1}+1*F_{n-2}+1*f_{n-1}+1*f_{n-2} \] \[ F_{n}=0*S_{n-1}+1*F_{n- ...

  5. 长短时记忆神经网络（LSTM）介绍以及简单应用分析

    本文分为四个部分,第一部分简要介绍LSTM的应用现状:第二部分介绍LSTM的发展历史,并引出了受众多学者关注的LSTM变体——门控递归单元(GRU):第三部分介绍LSTM的基本结构,由基本循环神经网络 ...

  6. 如何制作一个Nginx镜像

    1,从这里你将学到编写Dockerfile的4个重要指令RUN,EXPOSE,ADD,ENTRYPOINT2,在Dockerfile中编写拷贝文件至容器的方法3, 安装一个nginx server,并 ...

  7. Scala 学习笔记之集合(2)

    class StudentTT extends StudentT{ def sayBye(name: String, age: Int)(address: String){ println(" ...

  8. 每个新手程序员都必须知道的Python技巧

    当下,Python 比以往的任何时候都更加流行,人们每天都在实践着 Python 是多么的强大且易用. 我从事 Python 编程已经有几年时间了,但是最近6个月才是全职的.下面列举的这些事情,是我最 ...

  9. Spring Boot 2.X(四)：Spring Boot 自定义 Web MVC 配置

    0.准备 Spring Boot 不仅提供了相当简单使用的自动配置功能,而且开放了非常自由灵活的配置类.Spring MVC 为我们提供了 WebMvcConfigurationSupport 类和一 ...

  10. Unity动态改变物体遮挡关系

    在动态创建物体时,通常同父级下先创建的子物体会被后创建的遮挡,此时就需要我们用代码改变对象的层级. GameObject go;go.transform.SetAsLastSibling();//设置 ...