<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

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

     <style type="text/css">

             .gaosi{

                     filter:url("#f1");

                 }

             .swiper-container{

                 width: 100%;

                 height: 300px;

                 overflow: hidden;

             }

             img{

                 width: 100%;

                 height: 100%;

             }

         </style>

     </head>

     <body>

         <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"

                 viewBox="0,0,500,500" width="500" height="" aria-labelledby="title desc">

                     <title id="title"></title>

                     <desc id="desc"></desc>

                 <defs>

                     <filter id='f1'>

                         <feGaussianBlur in = "SourceGraphic" stdDeviation="0" id="fe"/>

                     </filter>

                 </defs>    

             <div class="swiper-container">

             <div class="swiper-wrapper">

                 <div class="swiper-slide"><img src="img/001.jpg" class="img gaosi"/></div>

                 <div class="swiper-slide"><img class = "img gaosi" src="img/002.jpg"/></div>

                 <div class="swiper-slide"><img class = "img gaosi" src="img/003.jpg"/></div>

             </div>

             <div class="swiper-pagination">

             </div>

         </div>

         </svg>

         <script type="text/javascript" src="basic/js/swiper.min.js"></script>

         <script type="text/javascript">

             var mySwiper = new Swiper('.swiper-container',{

                 pagination :'.swiper-pagination',

                 onSlideChangeStart: function(swiper){

                     var fe = document.querySelector('#fe');

                     fe.setAttribute('stdDeviation',15);

                 },

                 onSlideChangeEnd: function(swiper){

                     var fe = document.querySelector('#fe');

                     var x = 15;

                     var timer = setInterval(function(){

                         x--;

                         fe.setAttribute('stdDeviation',x);

                         if(x<=0){

                             clearInterval(timer)

                         }

                     },40)

                     }

             })

         </script>

     </body>

 </html>

svg-高斯模糊+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: ...

随机推荐

  1. Jquery实现AJAX拦截

    前几天项目需要实现一个AJAX拦截,于是就用jquery写了一个,这里分享一下. 需求是这样的,ajax不是我来写,所有说我是不能动ajax的,并且我也不知道什么时候它会发生,为了方便项目经理让我把它 ...

  2. 第四章 HTML与JavaScript

    DHTML就是与CSS和Web文档进行交互生成动态页面的JavaScript. 4.1HTML文档剖析 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...

  3. .Net Request.Form含有危险字符的处理办法

    今天我们的网站遇到一个问题,下标就类似于化学分子式这样的是需要用"<sub></sub>"这个标签括起来的,当时没有转义,有部分标签就显示不出来了, 后来我 ...

  4. Android自定义Dialog及其布局

     实际项目开发中默认的Dialog样式无法满足需求,需要自定义Dialog及其布局,并响应布局中控件的事件. 上效果图: 自定义Dialog,LogoutDialog: 要将自定义布局传入构造函数中, ...

  5. iOS_UIImage_图片剪切

    - (UIImage *)imagecutWithRect:(CGRect)rect { CGImageRef subImageRef = CGImageCreateWithImageInRect(s ...

  6. java类加载器-系统类加载器

    系统类加载器 系统类加载器可能都耳详能熟,但是为了完整点,还是先简单的说说系统的类加载器吧. public class Test { public static void main(String[] ...

  7. UI自动化测试框架(项目实战)python、Selenium(日志、邮件、pageobject)

    其实百度UI自动化测试框架,会出来很多相关的信息,不过就没有找到纯项目的,无法拿来使用的:所以我最近就写了一个简单,不过可以拿来在真正项目中可以使用的测试框架. 项目的地址:https://githu ...

  8. SQL Server时间粒度系列----第4节季、年时间粒度详解

    本文目录列表: 1.SQL Server季时间粒度2.SQL Server年时间粒度 3.总结语 4.参考清单列表   SQL Serve季时间粒度       季时间粒度也即是季度时间粒度.一年每3 ...

  9. 最简单的pagging插件

    <html> <head> <title>jQuery Easy-Paging Test</title> </head> <body& ...

  10. LINQ to SQL语句(5)之Order By

    适用场景:对查询出的语句进行排序,比如按时间排序等等. 说明:按指定表达式对集合排序:延迟,:按指定表达式对集合排序:延迟,默认是升序,加上descending表示降序,对应的扩展方法是OrderBy ...