轮播图2

最新推荐文章于 2019-09-03 01:06:39 发布

__Robin

最新推荐文章于 2019-09-03 01:06:39 发布

阅读量245

点赞数

本文链接：https://blog.csdn.net/robin13438235412/article/details/82869091

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3d轮播图-jq22.com</title>
<script src="jquery-1.11.3.js"></script>
<style>
.carousel {
   position:relative;
   padding:20px;
   -webkit-perspective:500px;
   perspective:500px;
   overflow:hidden;
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-orient:vertical;
   -webkit-box-direction:normal;
   -ms-flex-direction:column;
   flex-direction:column;
   -webkit-box-align:center;
   -ms-flex-align:center;
   align-items:center;
}
.carousel > * {
   -webkit-box-flex:0;
   -ms-flex:0 0 auto;
   flex:0 0 auto;
}
.carousel figure {
   margin:0;
   width:60%;
   height:100%;
   -webkit-transform-style:preserve-3d;
   transform-style:preserve-3d;
   -webkit-transition:-webkit-transform 0.5s;
   transition:-webkit-transform 0.5s;
   transition:transform 0.5s;
   transition:transform 0.5s,-webkit-transform 0.5s;
}
.carousel figure img {
   display:inline-block;
   width:100%;
   height:100%;
   box-sizing:border-box;
   padding:0 0px;
   cursor:pointer;
   background-size:100% 100%;
}
.carousel figure img:not(:first-of-type) {
   position:absolute;
   left:0;
   top:0;
}
.nav {
   position:absolute;
   width:44px;
   height:44px;
   background:#ddd;
   top:calc(50% - 22px);
   cursor:pointer;
}
div.next {
   right:0px;
   background-position:right top;
}
div.prev {
   left:0px;
}
</style>
</head>
<body>
<div class="carousel yice" data-gap="100">
<figure class="images">
<img src="http://www.jq22.com/img/cs/500x300-1.png">
<img src="http://www.jq22.com/img/cs/500x300-2.png">
<img src="http://www.jq22.com/img/cs/500x300-3.png">
<img src="http://www.jq22.com/img/cs/500x300-4.png">
<img src="http://www.jq22.com/img/cs/500x300-5.png">
<img src="http://www.jq22.com/img/cs/500x300-6.png">
<img src="http://www.jq22.com/img/cs/500x300-7.png">
<img src="http://www.jq22.com/img/cs/500x300-8.png">
<img src="http://www.jq22.com/img/cs/500x300-9.png">

</figure>
<div class="nav prev">《</div>
<div class="nav next">》</div>
</div>

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++) {
var padTB = gap / 2 + 'px';
var padLR = gap + 'px';
$(images[i]).css('padding', (padTB))

}
for (i = 1; i < n; i++) {
var num = i * theta

// console.log(apothem)
images[i].style.transformOrigin = '50% 50%' + -apothem + 'px';
images[i].style.transform = 'rotateY(' + i * theta + 'rad)';
console.log(num)
}
if (bfc)
for (i = 0; i < n; i++) {
images[i].style.backfaceVisibility = 'hidden';
}
rotateCarousel(currImage);
}

function setupNavigation() {
// var nav = document.getElementsByClassName('nav').addEventListener('click', onClick, true);;
$('.nav').on('click', onClick)

function onClick(e) {
e.stopPropagation();
var t = e.target;
if (t.classList.contains('next')) {
currImage++;
} else {
currImage--;
}
rotateCarousel(currImage);
}
}

}
</script>

</body>
</html>

__Robin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图2

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;3d轮播图-jq22.com&lt;/title&gt;&lt;script src="jquery-1.11.3.js"&gt;&lt;/script&gt;
复制链接

扫一扫