这是一款效果非常炫酷的jQuery和SVG遮罩轮播图特效。该轮播图特效使用SVG剪裁和遮罩技术，通过snap.svg插件制作轮播图图片过渡特效，支持移动手机，支持键盘控制和滑动控制。
使用方法
在页面中引入下面的js和CSS文件。
<!-- CSS -->
<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link rel="stylesheet" href="css/slider.css">
<link rel="stylesheet" href="css/main.css">
<!-- JavaScipt -->
<script src="/path/to/jquery-min.js"></script>
<script src="/path/to/jquery.mobile.custom.min.js"></script>
<script src="/path/to/snap.svg-min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="/path/to/TweenMax.min.js"></script>
<script src="js/slider.js"></script>
HTML结构
该jQuery和SVG遮罩轮播图特效的HTML结构如下。
<div class="portfolio slider-wrapper">
<ul class="slider" data-step1="M1402,800h-2V0h1c0.6,0,1,0.4,1,1V800z" data-step2="M1400,800H379L771.2,0H1399c0.6,0,1,0.4,1,1V800z" data-step3="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z" data-step4="M-2,800h2V0h-1c-0.6,0-1,0.4-1,1V800z" data-step5="M0,800h1021L628.8,0L1,0C0.4,0,0,0.4,0,1L0,800z" data-step6="M0,800h1400V0L1,0C0.4,0,0,0.4,0,1L0,800z">
<li class="visible">
<div class="svg-wrapper">
<svg viewBox="0 0 1400 800">
<defs>
<clipPath id="image-1">
<path id="changing-path-1" d="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z"/>
</clipPath>
</defs>
<image height='100%' width="100%" clip-path="url(#image-1)" href="img/2.jpg"></image>
<div class="slider__info">
<p class="slider__title text">
<span class="text__first">
<span class="text__word">Karbokam</span>
<span class="text__first-bg" style="background-color: #3A7E94"></span>
</span>
</p>
<p class="slider__desc text">
<span class="text__second">
<span class="text__word">Production of technical carboxymethyl cellulose <br> (CMC) and polyanionic cellulose (PAC)</span>
<span class="text__second-bg" style="background-color: #E688A1"></span>
</span>
</p>
</div>
<div class="slider__link cd-slider-navigation">
<a href="#0" class="next-slide slider__site text">
<span class="text__first">
<span class="text__word">Visit karbokam.ru <img class="arrow" src="img/arrow.svg" alt=""></span>
<span class="text__first-bg" style="background-color: #3A7E94"></span>
</span>
</a>
<p class="slider__visit text">
<span class="text__second">
<span class="text__word">Official website</span>
<span class="text__second-bg" style="background-color: #E688A1"></span>
</span>
</p>
</div>
</svg>
</div> <!-- .svg-wrapper -->
</li>
<li>
<div class="svg-wrapper">
<svg viewBox="0 0 1400 800">
<defs>
<clipPath id="image-2">
<path id="changing-path-2" d="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z"/>
</clipPath>
</defs>
<image height='100%' width="100%" clip-path="url(#image-2)" href="img/1.jpg"></image>
<div class="slider__info">
<p class="slider__title text">
<span class="text__first">
<span class="text__word">UAZ KD</span>
<span class="text__first-bg" style="background-color: #535986"></span>
</span>
</p>
<p class="slider__desc text">
<span class="text__second">
<span class="text__word">Authorized distributor of UAZ (Ulyanovsk Automobile <br> Plant)</span>
<span class="text__second-bg" style="background-color: #DABDB2"></span>
</span>
</p>
</div>
<div class="slider__link cd-slider-navigation">
<a href="#0" class="next-slide slider__site text">
<span class="text__first">
<span class="text__word">Visit uaz159.ru<img class="arrow" src="img/arrow.svg" alt=""></span>
<span class="text__first-bg" style="background-color: #535986"></span>
</span>
</a>
<p class="slider__visit text">
<span class="text__second">
<span class="text__word">Official website</span>
<span class="text__second-bg" style="background-color: #DABDB2"></span>
</span>
</p>
</div>
</svg>
</div> <!-- .svg-wrapper -->
</li>
<li>
<div class="svg-wrapper">
<svg viewBox="0 0 1400 800">
<defs>
<clipPath id="image-3">
<path id="changing-path-3" d="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z"/>
</clipPath>
</defs>
<image height='100%' width="100%" clip-path="url(#image-3)" href="img/3.jpg"></image>
<div class="slider__info">
<p class="slider__title text">
<span class="text__first">
<span class="text__word">Karbokam</span>
<span class="text__first-bg" style="background-color: #1ABDFE"></span>
</span>
</p>
<p class="slider__desc text">
<span class="text__second">
<span class="text__word">Production of technical carboxymethyl cellulose <br> (CMC) and polyanionic cellulose (PAC)</span>
<span class="text__second-bg" style="background-color: #CB1537"></span>
</span>
</p>
</div>
<div class="slider__link cd-slider-navigation">
<a href="#0" class="next-slide slider__site text">
<span class="text__first">
<span class="text__word">Visit karbokam.ru <img class="arrow" src="img/arrow.svg" alt=""></span>
<span class="text__first-bg" style="background-color: #1ABDFE"></span>
</span>
</a>
<p class="slider__visit text">
<span class="text__second">
<span class="text__word">Official website</span>
<span class="text__second-bg" style="background-color: #CB1537"></span>
</span>
</p>
</div>
</svg>
</div> <!-- .svg-wrapper -->
</li>
</ul> <!-- .slider -->
<ol class="slider-controls">
<li class="selected"><a href="#0"><em>Item 1</em></a></li>
<li><a href="#0"><em>Item 2</em></a></li>
<li><a href="#0"><em>Item 2</em></a></li>
<!-- other list items here -->
</ol> <!-- .slider-controls -->
</div>
该jQuery和SVG遮罩轮播图特效的github地址为：https://github.com/alikinvv/svg-mask-slider
