一款JS和CSS3制作的3D旋转图片切换代码,有多种3D旋转的样式可供选择,主要通过两个按钮来控制图片的轮播,整体效果还时挺酷炫的,喜欢的童鞋请收下吧。
页面的head部分,需引入必要的CSS样式文件,代码如下:
<link type="text/css" rel="stylesheet" href="css/style.css">
页面的body部分,多个div容器里分别放入不同的样式效果,代码如下:
<h1>3D旋转图片切换轮播</h1>
<h2>三张图片</h2>
<div class="carousel">
<figure>
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
</figure>
<nav>
<button class="nav prev">上一张</button>
<button class="nav next">下一张</button>
</nav>
</div>
<h2>四张图片</h2>
<div class="carousel">
<figure>
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
</figure>
<nav>
<button class="nav prev">上一张</button>
<button class="nav next">下一张</button>
</nav>
</div>
<h2>八张图片</h2>
<div class="carousel">
<figure>
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
<img src="img/6.jpg" alt="">
<img src="img/7.jpg" alt="">
<img src="img/8.jpg" alt="">
</figure>
<nav>
<button class="nav prev">上一张</button>
<button class="nav next">下一张</button>
</nav>
</div>
<h2>八张图片,20像素间距</h2>
<div class="carousel" data-gap="20">
<figure>
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
<img src="img/6.jpg" alt="">
<img src="img/7.jpg" alt="">
<img src="img/8.jpg" alt="">
</figure>
<nav>
<button class="nav prev">上一张</button>
<button class="nav next">下一张</button>
</nav>
</div>
<h2>八张图片,80像素间距</h2>
<div class="carousel" data-gap="80">
<figure>
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
<img src="img/6.jpg" alt="">
<img src="img/7.jpg" alt="">
<img src="img/8.jpg" alt="">
</figure>
<nav>
<button class="nav prev">上一张</button>
<button class="nav next">下一张</button>
</nav>
</div>
<h2>隐藏的背面</h2>
<div class="carousel" data-gap="20" data-bfc>
<figure>
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
<img src="img/6.jpg" alt="">
<img src="img/7.jpg" alt="">
<img src="img/8.jpg" alt="">
</figure>
<nav>
<button class="nav prev">上一张</button>
<button class="nav next">下一张</button>
</nav>
</div>
页面的底部,通过javascript来设置图片的3D旋转效果,代码如下:
<script type="text/javascript">
window.addEventListener('load', function () {
var carousels = document.querySelectorAll('.carousel');
for (var i = 0; i < carousels.length; i++) {
carousel(carousels[i]);
}
});
function carousel(root) {
var figure = root.querySelector('figure'),
nav = root.querySelector('nav'),
images = figure.children,
n = images.length,
gap = root.dataset.gap || 0,
bfc = 'bfc' in root.dataset,
theta = 2 * Math.PI / n,
currImage = 0;
setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
window.addEventListener('resize', function () {
setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
});
setupNavigation();
function setupCarousel(n, s) {
var apothem = s / (2 * Math.tan(Math.PI / n));
figure.style.transformOrigin = '50% 50% ' + -apothem + 'px';
for (var i = 0; i < n; i++) {
images[i].style.padding = gap + 'px';
}for (i = 1; i < n; i++) {
images[i].style.transformOrigin = '50% 50% ' + -apothem + 'px';
images[i].style.transform = 'rotateY(' + i * theta + 'rad)';
}
if (bfc) for (i = 0; i < n; i++) {
images[i].style.backfaceVisibility = 'hidden';
}rotateCarousel(currImage);
}
function setupNavigation() {
nav.addEventListener('click', onClick, true);
function onClick(e) {
e.stopPropagation();
var t = e.target;
if (t.tagName.toUpperCase() != 'BUTTON') return;
if (t.classList.contains('next')) {
currImage++;
} else {
currImage--;
}
rotateCarousel(currImage);
}
}
function rotateCarousel(imageIndex) {
figure.style.transform = 'rotateY(' + imageIndex * -theta + 'rad)';
}
}
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791