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>