3D轮播图，我写成vue组件模式了，用的Scss，图片会在3D空间里，每张图片被分成10份，进行不同方向的旋转，变成另一张图片
<template>
<div class="bzgf">
<img :src="bzgf" alt="" class="bzgf_bg" />
<div class="swipe" ref="swipe" @mouseover="timeend" @mouseout="timestart">
<span class="swipe_item_father" v-for="(itemf,indexf) in 10" :key="indexf">
<span class="swipe_item_child" v-for="(itemc,indexc) in 4" :key="indexc"></span>
</span>
<img :src="btn" alt="" class="left_btn" @click="swipebefore">
<img :src="btn" alt="" class="right_btn" @click="swipeafter">
</div>
</div>
</template>
<script>
export default {
data() {
return {
id:0,
bzgf: "http://together.vaiwan.com/assets/test.jpg",
swieptime:'',
btn:"http://together.vaiwan.com/assets/arrow.png",
img:[
"http://together.vaiwan.com/assets/bzgf_one.png",
"http://together.vaiwan.com/assets/bzgf_two.png",
"http://together.vaiwan.com/assets/bzgf_three.png",
"http://together.vaiwan.com/assets/bzgf_four.png"
]
}
},
methods:{
swipechange(){
let fatheritems=document.getElementsByClassName('swipe_item_father');
for(let i=0;i<fatheritems.length;i++)
{
if(i<5)
{
fatheritems[i].children[0].style.backgroundImage='url('+this.img[0]+')';
fatheritems[i].children[1].style.backgroundImage='url('+this.img[1]+')';
fatheritems[i].children[2].style.backgroundImage='url('+this.img[2]+')';
fatheritems[i].children[3].style.backgroundImage='url('+this.img[3]+')';
}
else {
fatheritems[i].children[0].style.backgroundImage='url('+this.img[0]+')';
fatheritems[i].children[3].style.backgroundImage='url('+this.img[1]+')';
fatheritems[i].children[2].style.backgroundImage='url('+this.img[2]+')';
fatheritems[i].children[1].style.backgroundImage='url('+this.img[3]+')';
}
}
this.swieptime=setInterval(() => {
this.id++;
for(let i=0;i<fatheritems.length;i++)
{
if(i<5)
{
fatheritems[i].style.transform='rotateX('+-90*this.id+'deg)'
}
else {
fatheritems[i].style.transform='rotateX('+90*this.id+'deg)'
}
}
}, 8000);
},
swipebefore(){
let fatheritems=document.getElementsByClassName('swipe_item_father');
this.id--;
for(let i=0;i<fatheritems.length;i++)
{
if(i<5)
{
fatheritems[i].style.transform='rotateX('+-90*this.id+'deg)'
}
else {
fatheritems[i].style.transform='rotateX('+90*this.id+'deg)'
}
}
},
swipeafter(){
let fatheritems=document.getElementsByClassName('swipe_item_father');
this.id++;
for(let i=0;i<fatheritems.length;i++)
{
if(i<5)
{
fatheritems[i].style.transform='rotateX('+-90*this.id+'deg)'
}
else {
fatheritems[i].style.transform='rotateX('+90*this.id+'deg)'
}
}
},
timestart(){
let fatheritems=document.getElementsByClassName('swipe_item_father');
clearInterval(this.swieptime);
this.swieptime=setInterval(() => {
this.id++;
for(let i=0;i<fatheritems.length;i++)
{
if(i<5)
{
fatheritems[i].style.transform='rotateX('+-90*this.id+'deg)'
}
else {
fatheritems[i].style.transform='rotateX('+90*this.id+'deg)'
}
}
}, 8000);
},
timeend(){
clearInterval(this.swieptime);
}
},
mounted(){
this.swipechange();
},
beforeDestroy(){
clearInterval(this.swieptime);
}
}
</script>
<style lang="scss" scoped>
$width:1000px; //轮播宽度
$height:480px; //轮播高度
$fwidth:200px; //轮播每个小块的宽度
$theight:240px; //轮播每个小块的高度
$top:-240px; //轮播第二行小块的top值
$fheight:120px; //轮播小块翻转的高度
$lefttwo:200px; //轮播第二列的left值
$leftthree:400px; //轮播第三列的left值
$leftfour:600px; //轮播第四列的left值
$leftfive:800px; //轮播第五列的left值
.bzgf {
.bzgf_bg {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.swipe {
position: absolute;
width: $width;
height: $height;
left: 140px;
top: 100px;
.swipe_item_father {
position: absolute;
width: $fwidth;
height: $theight;
transform-style: preserve-3d;
transform: rotateX(0deg);
.swipe_item_child {
position: absolute;
width: 100%;
height: 100%;
background-size: $width $height;
background-repeat: no-repeat;
overflow: hidden;
&:nth-child(1) {
transform: rotateX(0deg) translateZ($fheight);
}
&:nth-child(2) {
transform: rotateX(-90deg) translateZ($fheight);
}
&:nth-child(3) {
transform: rotateX(-180deg) translateZ($fheight);
}
&:nth-child(4) {
transform: rotateX(-270deg) translateZ($fheight);
}
}
&:nth-child(1) {
left: 0px;
top: 0;
transition: all 1.6s 0s;
.swipe_item_child {
background-position: 0px 0px;
}
}
&:nth-child(2) {
left: $lefttwo;
top: 0;
transition: all 1.6s .2s;
.swipe_item_child {
background-position: -$lefttwo 0px;
}
}
&:nth-child(3) {
left: $leftthree;
top: 0;
transition: all 1.6s .4s;
.swipe_item_child {
background-position: -$leftthree 0px;
}
}
&:nth-child(4) {
left: $leftfour;
top: 0;
transition: all 1.6s .6s;
.swipe_item_child {
background-position: -$leftfour 0px;
}
}
&:nth-child(5) {
left: $leftfive;
top: 0;
transition: all 1.6s .8s;
.swipe_item_child {
background-position: -$leftfive 0px;
}
}
&:nth-child(6) {
left: 0px;
top: $theight;
transition: all 1.6s .8s;
.swipe_item_child {
background-position: 0px $top;
}
}
&:nth-child(7) {
left: $lefttwo;
top: $theight;
transition: all 1.6s .6s;
.swipe_item_child {
background-position: -$lefttwo $top;
}
}
&:nth-child(8) {
left: $leftthree;
top: $theight;
transition: all 1.6s .4s;
.swipe_item_child {
background-position: -$leftthree $top;
}
}
&:nth-child(9) {
left: $leftfour;
top: $theight;
transition: all 1.6s .2s;
.swipe_item_child {
background-position: -$leftfour $top;
}
}
&:nth-child(10) {
left: $leftfive;
top: $theight;
transition: all 1.6s 0s;
.swipe_item_child {
background-position: -$leftfive $top;
}
}
}
.left_btn {
position: absolute;
width: 45px;
height: 45px;
border-radius: 50%;
top: 0;
bottom: 0;
margin: auto;
left: 30px;
transition: all .3s;
transform: rotate(180deg);
opacity: 0.5;
cursor: pointer;
&:hover {
opacity: 1;
}
}
.right_btn {
position: absolute;
width: 45px;
height: 45px;
border-radius: 50%;
top: 0;
bottom: 0;
margin: auto;
right: 30px;
transition: all .3s;
opacity: 0.5;
cursor: pointer;
&:hover {
opacity: 1;
}
}
}
}
</style>
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-12-6 10:07:01
置顶卡
千斤顶
显身卡
发表于 2020-12-6 11:33:13
楼主