js和CSS3炫酷3D轮播图翻转特效.zip资源-CSDN文库

共18个文件

jpg：10个

css：3个

html：1个

版权申诉

110 浏览量 2022-11-01 01:18:22 上传评论收藏 362KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

js和CSS3炫酷3D轮播图翻转特效.zip （18个子文件）

132686952874594518

jsCSS3_3Dlbt

css

htmleaf-demo.css 6KB

style.css 2KB

normalize.css 2KB

2.jpg 41KB

1.jpg 42KB

img

8.jpg 38KB

2.jpg 27KB

1.jpg 19KB

6.jpg 40KB

3.jpg 28KB

5.jpg 54KB

4.jpg 18KB

7.jpg 58KB

fonts

icomoon.woff 1KB

icomoon.svg 2KB

icomoon.eot 2KB

icomoon.ttf 1KB

index.html 5KB

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js和CSS3 3D轮播图</title> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="htmleaf-container"> <header class="htmleaf-header"> <h1>js和CSS3 3D轮播图 <span>3D Rotating Carousel Examples</span></h1> <div class="htmleaf-links"> <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a> <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a> </div> </header> <h1>3D Rotating Carousel Examples</h1> <h2>Three images</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">Prev</button> <button class="nav next">Next</button> </nav> </div> <h2>Four images</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">Prev</button> <button class="nav next">Next</button> </nav> </div> <h2>Eight images</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">Prev</button> <button class="nav next">Next</button> </nav> </div> <h2>Eight images, with 20px gap</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">Prev</button> <button class="nav next">Next</button> </nav> </div> <h2>Eight images, with 80px gap</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">Prev</button> <button class="nav next">Next</button> </nav> </div> <h2>Hidden backfaces</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">Prev</button> <button class="nav next">Next</button> </nav> </div> </div> <script type="text/javascript"> 'use strict'; 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> </body> </html>

评论收藏

内容反馈

版权申诉