svg+js实现图片轮播幻灯片切换水纹波动过渡效果代码-html代码-BFW代码库

svg+js实现图片轮播幻灯片切换水纹波动过渡效果代码

代码语言：html

所属分类：幻灯片

代码描述：svg+js实现图片轮播幻灯片切换水纹波动过渡效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">





    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Zeyada&amp;display=swap'>

    <style>
        *,
        ::before,
        ::after {
        	margin: 0;
        	padding: 0;
        	box-sizing: border-box;
        }
        body {
        	color: white;
        	min-height: 100vh;
        	background: black;
        	display: grid;
        	place-content: center;
        	font-family: system-ui, sans-serif;
        	font-size: 1rem;
        }
        .gallery-wrapper {
        	--ani-speed: 2000ms; /* note - this needs to be the same as in the JS */
        	width: 80vw;
        	max-width: 800px;
        	position: relative;
        }
        .gallery-images {
        	width: 100%;
        	height: auto;
        	aspect-ratio: 6/4;
        	position: relative;
        	overflow: hidden;
        	border: 1px solid #ffffff30;
        }
        
        .gallery-images img {
        	position: absolute;
        	width: 100%;
        	height: 100%;
        	object-fit: cover;
        	scale: 110%;
        	opacity: 0;
        	filter: url(#wavy);
        	transition:  var(--ani-speed,2000ms) linear;
        }
        .gallery-images img.current {
        	opacity: 1;
        }
        
        .gallery-wrapper nav {
        	margin-top: 1rem;
        	display: flex;
        	align-items: center;
        	justify-content: center;
        	gap: 1rem;
        	margin-bottom: 1rem;
        }
        .gallery-wrapper nav button {
        	-webkit-appearance: none;
        	text-align: inherit;
        	background: none;
        	box-shadow: none;
        	cursor: pointer;
        	padding: 0.5rem;
        	aspect-ratio: 1/1;
        	font: inherit;
        	outline: none;
        	border-radius: 5px;
        	transition: 500ms ease-in-out;
        	position: relative;
        	cursor: pointer;
        	border: 1px solid #eeeeee30;
        	color: white;
        }
        .gallery-wrapper nav button:disabled {
        	opacity: 0.5;
        	pointer-events: none;
        }
        .gallery-wrapper nav button:hover {
        	background-color: rgb(11, 65, 112);
        }
        .gallery-wrapper nav > .thumbs {
        	display: flex;
        	align-items: center;
        	justify-content: center;
        	gap: 1rem;
        }
        .gallery-wrapper nav > .thumbs > button {
        	border-radius: 50%;
        }
        .gallery-wrapper nav > .thumbs button.current {
        	background-color: rgb(11, 65, 112);
        }
        
        .hashtag {
        	font-size: 0.8rem;
        	font-weight: 300;
        	rotate: -90deg;
        	position: absolute;
        	transform-origin: bottom right;
        	left: -14rem;
        	top: -1rem;
        }
    </style>




</head>

<body translate="no">
    <section id="gallery-wrapper" class="gallery-wrapper">

        <div id="gallery-images" class="gallery-images">
            <img src="//repo.bfw.wiki/bfwrepo/image/657423d4dfc1d.png" alt="cors" style="opacity: 1;">
            <img src="//repo.bfw.wiki/bfwrepo/image/6645fa8d6f8e2.png" akt="cliffs">
            <img src="//repo.bfw.wiki/bfwrepo/image/657423d4dfc1d.png" alt="mountains">
            <img src="//repo.bfw.wiki/bfwrepo/image/637ec4353ff32.png" alt="forest">
        </div>

        <nav>
            <button type="button" nav-btn="prev" id="btn-prev">
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left">
				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
				<path d="M15 6l-6 6l6 6" />
			</svg>
	     	</button>
            <div id="dots" class="thumbs"></div>
            <button type="button" nav-btn="next" id="btn-next">
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right">
				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
				<path d="M9 6l6 6l-6 6" />
			</svg>
		</button>

    </nav>
    <p class="hashtag">#cpc-svg-filters #codepenchallenge</p>
 

        <!-- template - svg filter -->
        <svg id="svg">
			<filter id="wavy">
				<feTurbulence id="turbulence" type=&quo.........完整代码请登录后点击上方下载按钮下载查看