这是一款效果非常炫酷的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
