<!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. [经验栈]SQL语句逻辑运算符"AND"、"&&"兼容性

    最近打算把博客转移到typecho平台,选了一个风格个人比较喜欢的主题,即Akina for Typecho 主题模板,在这里先感谢题主的开源分享,但是在使用过程中一开始就出现"500 Da ...

  2. SpringCloud实现服务间调用（RestTemplate方式）

    上一篇文章<SpringCloud搭建注册中心与服务注册>介绍了注册中心的搭建和服务的注册,本文将介绍下服务消费者调用服务提供者的过程. 本文目录 一.服务调用流程二.服务提供者三.服务消 ...

  3. mybatis collection和association使用区别

    1. association-关联,用于一对一(如人与身份证)和多对一(如班级和学生) 2. collection-集合,用于一对多(如学生和班级)的关系

  4. 初识Hiberante框架和第一个案例

    今天想回顾一下一个月前学的hibernate框架,也让我了解了持久层的概念(访问数据库). 一.ORM概念 首先提的是ORM概念,O表示Object, R表示Relation(关系),关系型数据库,如 ...

  5. redis实践 —— redisReply简析

    redisReply 定义如下: /* This is the reply object returned by redisCommand() */ typedef struct redisReply ...

  6. 大家久等了，改造版阿里巴巴 sentinel 控制台终于开源了

    前言 最近几天,好几个小伙伴在后台询问,改造后的 sentinel-dashboard 什么时候开源.讲真,不是不想给大家放出来,是因为一些地方还没有完善好,怕误导了大家,在经过了一个星期业余时间的努 ...

  7. 解决mac OSX下安装git出现的"git命令需要使用开发者工具。您要现在安装该工具吗"(19款Mac)

    1.本地安装Git ,这里不做说明 2.命令行执行 sudo mv /usr/bin/git /usr/bin/git-system 3.如果提示 权限不足,操作不被允许,关闭Rootless,重启按 ...

  8. 使用真机导致Androidstudio打印不出log

    针对真机打印不出log这个问题,我具体的解决方案是这样: 1.你要确保你的Android studio中的菜单栏 ,Tools → Android → Enable ADB Integration这个 ...

  9. nrm的安装与使用

    nrm的作用:提供了一些最常用的NPM包镜像地址,能够让我们快速的切换安装包时候的服务器地址:,我们依旧使用的事npm的命令,只是镜像地址变了 什么是镜像:原来包刚一开始是只存在于国外的NPM服务器, ...

  10. TCP三次握手、四次握手

    前言 TCP用于应用程序之间的通信.当应用程序希望通过TCP与另一个应用程序通信时,它会发送一个通信请求.这个请求必须被送到一个确切的地址.在双方“握手”之后,TCP将在两个应用程序之间建立一个全双工 ...