JS和CSS3制作的3D旋转图片切换代码

来源:https://www.sucaihuo.com/js/2684.html 2017-08-09 23:59浏览(1587) 收藏

一款JS和CSS3制作的3D旋转图片切换代码,有多种3D旋转的样式可供选择,主要通过两个按钮来控制图片的轮播,整体效果还时挺酷炫的,喜欢的童鞋请收下吧。
JS和CSS3制作的3D旋转图片切换代码
分类:图片代码 > 图片轮播 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2