1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <link rel="stylesheet" type="text/css" href="basic/css/swiper.min.css"/>
7 <style type="text/css">
8 .gaosi{
9 filter:url("#f1");
10 }
11 .swiper-container{
12 width: 100%;
13 height: 300px;
14 overflow: hidden;
15 }
16 img{
17 width: 100%;
18 height: 100%;
19 }
20
21
22 </style>
23 </head>
24 <body>
25 <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
26 viewBox="0,0,500,500" width="500" height="" aria-labelledby="title desc">
27 <title id="title"></title>
28 <desc id="desc"></desc>
29 <defs>
30 <filter id='f1'>
31 <feGaussianBlur in = "SourceGraphic" stdDeviation="0" id="fe"/>
32 </filter>
33 </defs>
34
35 <div class="swiper-container">
36 <div class="swiper-wrapper">
37 <div class="swiper-slide"><img src="img/001.jpg" class="img gaosi"/></div>
38 <div class="swiper-slide"><img class = "img gaosi" src="img/002.jpg"/></div>
39 <div class="swiper-slide"><img class = "img gaosi" src="img/003.jpg"/></div>
40 </div>
41 <div class="swiper-pagination">
42
43 </div>
44 </div>
45 </svg>
46 <script type="text/javascript" src="basic/js/swiper.min.js"></script>
47 <script type="text/javascript">
48 var mySwiper = new Swiper('.swiper-container',{
49 pagination :'.swiper-pagination',
50 onSlideChangeStart: function(swiper){
51 var fe = document.querySelector('#fe');
52 fe.setAttribute('stdDeviation',15);
53 },
54 onSlideChangeEnd: function(swiper){
55 var fe = document.querySelector('#fe');
56 var x = 15;
57 var timer = setInterval(function(){
58 x--;
59 fe.setAttribute('stdDeviation',x);
60 if(x<=0){
61 clearInterval(timer)
62 }
63 },40)
64 }
65 })
66
67 </script>
68 </body>
69 </html>
