阴阳师宣传页轮播特效
最近用js做了一个阴阳师的特效轮播图,代码写的有点菜,但也是写出来了,分享一下,勿喷,哈哈!
这个轮播图的主要特点是
1.以当前展示的图片为中心,当前图片转动角度为0 ,其他图片向两边依次递增递减30deg,并且translate3d Z轴方向的偏移量依次从中间向两边递减
2.当前现实的图片为高亮显示 其他为暗色
3.过渡时间 transition-duration 的控制 当轮播图到最后一个图片时。需要将过渡时间变为0,视图瞬间转为第一张图片;当然为了防止冲突,我让图片重复了一遍,真正需要轮播的图片只有4张,前面有四张重复,后面有一张重复(有点难解释,就是跟无缝滚动原理一样) ,这样但他滚动到倒数第二张图片时,即原本的倒数第一张,让他回到第一张图片去
HTML代码
//最外层盒子
<div class="swiper-container-3d feature-swiper">
//里层盒子 控制视图位置
<div class="swiper-wrapper" style="transform: translate3d(-3042px, 0px, 0px); ">
<div class="swiper-slide " data-index='0' style="transform: translate3d(0px,0px,-1140px) rotateX(0deg) rotateY(120deg);">
<img src="image/旋转1.jpg" alt="游戏特色">
<div class="cover"></div>
</div>
<div class="swiper-slide " data-index='1' style="transform: translate3d(0px, 0px, -855px) rotateX(0deg) rotateY(90deg); " >
<img src="image/旋转2.jpg" alt="游戏特色">
<div class="cover"></div>
</div>
<div class="swiper-slide" data-index='2' style="transform: translate3d(0px, 0px, -570px) rotateX(0deg) rotateY(60deg); " >
<img src="image/旋转3.jpg" alt="游戏特色">
<div class="cover"></div>
</div>
<div class="swiper-slide " data-index='3' style="transform: translate3d(0px, 0px, -285px) rotateX(0deg) rotateY(30deg); " >
<img src="image/旋转4.jpg" alt="游戏特色">
<div class="cover"></div>
</div>
<div class="swiper-slide swiper-slide-active" data-index='0' style="transform: translate3d(0px,0px,0px) rotateX(0deg) rotateY(0deg);">
<img src="image/旋转1.jpg" alt="游戏特色">
<div class="cover"></div>
</div>
<div class="swiper-slide " data-index='1' style="transform: translate3d(0px, 0px, -285px) rotateX(0deg) rotateY(-30deg); " >
<img src="image/旋转2.jpg" alt="游戏特色">
<div class="cover"></div>
</div>
<div class="swiper-slide" data-index='2' style="transform: translate3d(0px, 0px, -570px) rotateX(0deg) rotateY(-60deg); " >
<img src="image/旋转3.jpg" alt="游戏特色">
<div class="cover"></div>
</div>
<div class="swiper-slide " data-index='3' style="transform: translate3d(0px, 0px, -855px) rotateX(0deg) rotateY(-90deg); " >
<img src="image/旋转4.jpg" alt="游戏特色">
<div class="cover"></div>
</div>
<div class="swiper-slide " data-index='0' style="transform: translate3d(0px,0px,-1140px) rotateX(0deg) rotateY(-120deg); ">
<img src="image/旋转1.jpg" alt="游戏特色">
<div class="cover"></div>
</div>
</div>
</div>
//左右按钮
<div class="prev swiper-button-prev"></div>
<div class="next swiper-button-next"></div>
css代码
.swiper-container-3d {
perspective : 1200px;
webkit-perspective: 1200px;
-moz-perspective: 1200px;
-o-perspective: 1200px;
position: relative;
z-index: 1;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
}
.feature-swiper .swiper-slide {
width: 816px;
height: 613px;
position: relative;
}
.swiper-container-3d .swiper-slide ,.swiper-container-3d .swiper-wrapper {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.feature-swiper .swiper-slide img {
width: 810px;
height: 607px;
position: relative;
border: 3px solid #cbc08e;
}
/*到当前图片时,当前图片盒子的class为 swiper-slide-active 让图片遮罩消失*/
.feature-swiper .swiper-slide.swiper-slide-active .cover {
display: none;
}
/*遮罩*/
.feature-swiper .swiper-slide .cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
cursor: pointer;
}
.prev:hover ,.part03 .next:hover {
opacity: .8;
}
.prev {
background: url("../image/左箭头.png") no-repeat center;
left: 20px;
z-index: 10;
}
.prev ,.next {
width: 43px;
height: 77px;
position: absolute;
top: 50%;
margin-top: -10px;
}
.next {
background: url("../image/右箭头.png") no-repeat center;
right: 20px;
z-index: 10;
}
js部分
window.addEventListener('load',function () {
//封装一下选择器,比较方便
function $ (name){
return document.querySelector(name);
}
var swiper_wrapper = $('.swiper-wrapper');
var right_btn = $('.swiper-button-next');
var left_btn = $('.swiper-button-prev');
var width = $('.swiper-slide').offsetWidth;
var lunbo_num=4;
var translate = 0;
var lunbo_flag = true;
var swiper_slides = document.querySelectorAll('.swiper-slide');
//右按钮点击事件
right_btn.addEventListener('click',function () {
if(lunbo_flag==true){// 防止轮播图连续点击出现错误
lunbo_flag=false;
translate = -594-(lunbo_num)*width;
console.log(translate);
lunbo_num++;
swiper_wrapper.style.transitionDuration = '300ms';
for(var j=0; j< swiper_slides.length;j++){
swiper_slides[j].style.transitionDuration = '300ms';
}
roll();
swiper_wrapper.style.transform='translate3d('+translate+'px,0px,0px)';
}
})
left_btn.addEventListener('click',function () {
if(lunbo_flag==true) {
lunbo_flag=false;
translate = -594 - (lunbo_num - 2) * width;
console.log(222);
lunbo_num--;
for (var j = 0; j < swiper_slides.length; j++) {
swiper_slides[j].style.transitionDuration = '300ms';
}
roll();
swiper_wrapper.style.transform = 'translate3d(' + translate + 'px,0px,0px)';
swiper_wrapper.style.transitionDuration = '300ms';
}
})
// 为每个图片盒子加上过渡完成事件 让其能够无缝连接
for(var j=0; j< swiper_slides.length;j++){
swiper_slides[j].addEventListener('transitionend',function (e) {
lunbo_flag= true;
var flag = true;
if(lunbo_num==swiper_slides.length-2&&flag){
flag=false;
lunbo_num=3;
swiper_wrapper.style.transitionDuration = '';
for(var j=0; j< swiper_slides.length;j++){
swiper_slides[j].style.transitionDuration = '';
}
translate = -594-(lunbo_num-1)*width;
swiper_wrapper.style.transform='translate3d('+translate+'px,0px,0px)';
roll();
}
else if(lunbo_num==2&&flag){
flag = false;
lunbo_num =6;
swiper_wrapper.style.transitionDuration = '';
for(var j=0; j< swiper_slides.length;j++){
swiper_slides[j].style.transitionDuration = '';
}
translate = -594 - (lunbo_num - 1) * width;
swiper_wrapper.style.transform='translate3d('+translate+'px,0px,0px)';
roll();
}
})
}
//这个函数的作用就是滚动的时候带动所有transform属性的变化。
//因为转到一张图上 其他图的旋转角度也要变化
function roll() {
var translateZ =0 ;
var rotateY = 0;
for(var i=lunbo_num; i< swiper_slides.length; i++){
translateZ =- (i-lunbo_num)*285;
rotateY = -(i-lunbo_num)*30;
swiper_slides[i].style.transform= 'translate3d(0,0,'+translateZ+'px) rotateY('+rotateY+'deg) rotateX(0deg)';
for(var j=0; j< swiper_slides.length;j++){
swiper_slides[j].className= 'swiper-slide';
}
swiper_slides[lunbo_num].className= 'swiper-slide swiper-slide-active';
}
for(var j=0; j<lunbo_num; j++){
translateZ = -(lunbo_num-j)*285;
rotateY = (lunbo_num - j)*30;
swiper_slides[j].style.transform= 'translate3d(0,0,'+translateZ+'px) rotateY('+rotateY+'deg) rotateX(0deg)';
}
}
})