<!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. 构建之法——homework4

    手机应用——软件腾讯QQ: QQ是腾讯公司开发的一款基于Internet的即时通信软件.最初通过在线广告进行盈利(Banner广告.Email广告等).然后通过免费注册QQ,获取大量用户.开发QQ相关 ...

  2. Redis数据库之服务器主从配置

    目的 主要培养对分布式REDIS主从复制架构运用的能力.理解并掌握REPLICATION工作原理的同时,能独立配置Replication ,使数据库运行在主从架格上.针对主从复制架构的运用,着力掌握S ...

  3. Spring 梳理-webApplicationContext 与servletContext

    1.WebApplicationContext的研究 ApplicationContext是spring的核心,Context通常解释为上下文环境,用“容器”来表述更容易理解一些,Applicatio ...

  4. SharePoint 2013 Create Folder with conententtype programer

    记录一下昨天写的SharePoint tool,需求是这样的: 在SharePoint list subfolder 下创建1000个folder,这些folder指定特殊的contenttype,c ...

  5. 阿里云服务器ecs配置之安装redis服务

    一.介绍 Redis是当前比较热门的NOSQL系统之一,它是一个key-value存储系统.和Memcache类似,但很大程度补偿了Memcache的不足,它支持存储的value类型相对更多,包括st ...

  6. springboot jpa使用

    1.添加pom依赖: <dependency> <groupId>org.springframework.boot</groupId> <artifactId ...

  7. 一道短小精悍的JS小题目

    看到题目你是不是以为我在开车,没错,我就不承认,你能咋的,你瞅啥,别瞅我,瞅题 题目是这样式的 结果是啥呀,这里我就不买关子了,结果是undefined,相信基础好一点的大佬们一眼就能看出来,像我这种 ...

  8. [WP8.1]给Pivot的Header加上颜色

    先上个效果图 以前想实现这个给Pivot加颜色时只找到8的,通过参考8的实现方式,8.1的实现如下,在Pivot的样式上做一些修改,如下图的红框处 另外如果要改Pivot的Header里文字的颜色又要 ...

  9. 1. SOFAJRaft源码分析— SOFAJRaft启动时做了什么？

    我们这次依然用上次的例子CounterServer来进行讲解: 我这里就不贴整个代码了 public static void main(final String[] args) throws IOEx ...

  10. 从xxe-lab来深入学习xxe漏洞

    这几天,想复习一下xxe的知识,于是把以前的一个靶场拿过来玩玩,顺便审计一下代码2333,靶场地址:https://github.com/c0ny1/xxe-lab 首先先练习的是php-xxe: 我 ...