<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>WebGL Distortion Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="loading">
<main>
<div id="slider">
<div class="slider-inner">
<div id="slider-content">
<div class="meta">Species</div>
<h2 id="slide-title">Amur <br>Leopard</h2>
<span data-slide-title="0">Amur <br>Leopard</span>
<span data-slide-title="1">Asiatic <br>Lion</span>
<span data-slide-title="2">Siberian <br>Tiger</span>
<span data-slide-title="3">Brown <br>Bear</span>
<div class="meta">Status</div>
<div id="slide-status">Critically Endangered</div>
<span data-slide-status="0">Critically Endangered</span>
<span data-slide-status="1">Endangered</span>
<span data-slide-status="2">Endangered</span>
<span data-slide-status="3">Least Concern</span>
</div>
</div>
<img src="img/a1.jpg" />
<img src="img/a2.jpg" />
<img src="img/a3.jpg" />
<img src="img/a4.jpg" />
<div id="pagination">
<button class="active" data-slide="0"></button>
<button data-slide="1"></button>
<button data-slide="2"></button>
<button data-slide="3"></button>
</div>
</div>
</main>
<script type="text/javascript" src='js/three.min.js'></script>
<script type="text/javascript" src='js/imagesloaded.pkgd.js'></script>
<script type="text/javascript" src='js/TweenMax.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
html5基于WebGL图片模糊幻灯片切换特效源码.zip
版权申诉
6 浏览量
2022-11-04
23:37:27
上传
评论
收藏 340KB ZIP 举报
html5基于WebGL图片模糊幻灯片切换特效源码.zip （10个子文件） 
132686858983483531 likecs.com_132686859001040360 css 
style.css 8KB img 
a1.jpg 52KB a2.jpg 50KB a4.jpg 34KB a3.jpg 64KB
index.html 2KB js index.js 7KB imagesloaded.pkgd.js 12KB TweenMax.min.js 113KB three.min.js 493KB资源评论
