CSS滤镜与图片切换动画实例页面

CSS代码：

zxx-slide {
    display: block;
    width: 250px; height: 186px;
    position: relative;
}
.zxx-slide-a {
    position: absolute;
    display: none;
}
.zxx-slide-a.in {
    animation-duration: .6s;
    z-index: 1;
}
.zxx-slide-img {
    display: block;
    width: 250px; height: 186px;
}
.zxx-slide-index-x {
    position: absolute;
    left: 0; right: 0; bottom: 10px;
    text-align: center;
    font-size: 0;
    z-index: 1;
}
.zxx-slide-index {
    display: inline-block;
    width: 20px; height: 20px;
    padding: 0; margin: 0;
    box-sizing: border-box;
    border: 5px solid transparent;
    background-color: rgba(0,0,0,.6);
    background-clip: content-box;
    border-radius: 50%;
    transition: background-color .3s;
    cursor: pointer;
}
.zxx-slide-index.active {
    background-color: rgba(255,0,0,.9);
}

[data-filter="brightness"] .in {
    animation-name: brightnessIn;
}
[data-filter="grayscale"] .in {
    animation-name: grayscaleIn;
}
[data-filter="blur"] .in {
    animation-name: blurIn;
}
[data-filter="hue"] .in {
    animation-name: hueIn;
}
@keyframes brightnessIn {
    0%   { filter: brightness(5); }
    100% { filter: brightness(1); }    
}
@keyframes grayscaleIn {
    0%   { filter: grayscale(100%); }
    100% { filter: grayscale(0%); }    
}
@keyframes blurIn {
    0%   { filter: blur(10px); }
    100% { filter: blur(0); }    
}

HTML代码：

<zxx-slide data-filter="brightness">
    <div class="zxx-slide-x">
        <a href class="zxx-slide-a" style="display: block;"><img class="zxx-slide-img" src="./ps1.jpg"></a>
        <a href class="zxx-slide-a"><img class="zxx-slide-img" src="./ps2.jpg"></a>
        <a href class="zxx-slide-a"><img class="zxx-slide-img" src="./ps3.jpg"></a>
        <a href class="zxx-slide-a"><img class="zxx-slide-img" src="./ps4.jpg"></a>
    </div>
    <div class="zxx-slide-index-x">
        <button class="zxx-slide-index active"></button>
        <button class="zxx-slide-index"></button>
        <button class="zxx-slide-index"></button>
        <button class="zxx-slide-index"></button>
    </div>
</zxx-slide>

JS代码：

/**
* @author zhangxinxu(.com)
* @article https://www.zhangxinxu.com/wordpress/?p=8643
* @description 图片切换或者类似转场脚本，demo专用，配合demo页面CSS和HTML结构实现
*              如果想作为组件使用，请访问 zxx-slide.js
* @license MIT 可商业，但需要保留作者信息和来源
*/
var eleZxxSlides = document.querySelectorAll('zxx-slide');
[].slice.call(eleZxxSlides).forEach(function (container) {
    var timerSlide = null;
    var indexSlide = 0;
    container.addEventListener('mouseover', function () {
        clearTimeout(timerSlide);
    });
    container.addEventListener('mouseout', function () {
        clearTimeout(timerSlide);
        funSlide();
    });
    // 对应的元素
    var eleSlides = [].slice.call(container.querySelectorAll('a'));
    var eleButtons = [].slice.call(container.querySelectorAll('button'));
    
    // hover显示对应幻灯
    eleButtons.forEach(function (button, index) {
        ['mouseover', 'click'].forEach(function (eventType) {
            button.addEventListener(eventType, function () {
                clearTimeout(timerSlide);
                indexSlide = index;
                funSlide();
            });
        });
    });

    eleSlides.forEach(function (slide, index) {
        slide.addEventListener('animationend', function () {
            eleSlides.forEach(function (slide2) {
                if (slide2.classList.contains('in') == false) {
                    slide2.style.display = '';
                }
            });
        });
    });
    
    // 切换方法
    var funSlide = function() {
        eleSlides.forEach(function (slide, index) {            
            if (indexSlide == index) {
                slide.classList.add('in');
                slide.style.display = 'block';
            } else if (slide.classList.contains('in')) {
                slide.classList.remove('in');
            }
        });
        eleButtons.forEach(function (button, index) {
            button.classList.remove('active');
            if (indexSlide == index) {
                button.classList.add('active');
            }
        });
        
        timerSlide = setTimeout(function () {
            indexSlide++;
            if (indexSlide == eleSlides.length) {
                indexSlide = 0;
            }
            funSlide();
        }, 4000);
    }
    
    indexSlide++;
    setTimeout(funSlide, 4000);
});