js+css实现卡片轮播图效果

第js+css实现卡片轮播图效果本文实例为大家分享了js+css实现卡片轮播图效果的具体代码，供大家参考，具体内容如下

实现点击的时候切换卡片，自动轮播，鼠标移入暂停，移出继续轮播,有动画事件

效果就是这样

下面是代码

htmllang="en"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

metaname="viewport"content="width=device-width,initial-scale=1.0"

titleDocument/title

style

.box{

width:680px;

padding:50px;

margin:auto;

margin-top:300px;

}

.swiper,

#swiper{

width:830px;

height:200px;

position:relative;

}

.swiperdiv{

display:block;

position:absolute;

width:500px;

height:200px;

overflow:hidden;

left:165px;

top:0;

transition:0.5s;

color:#fff;

font-size:50px;

text-align:center;

line-height:200px;

}

.swiperdiv:nth-child(1){

background:#1ebe09;

}

.swiperdiv:nth-child(2){

background:#323a31;

}

.swiperdiv:nth-child(3){

background:#0985be;

}

.swiperdiv:nth-child(4){

background:#090cbe;

}

.swiperdiv:nth-child(5){

background:#be5109;

}

.swiperdiv:nth-child(6){

background:#be09af;

}

.swiperdiv:nth-child(7){

background:#be8e09;

}

.swiperdiv:nth-child(8){

background:#be0909;

}

.swiperdiv:nth-child(9){

background:#06162c;

}

.swiper.a{

opacity:1;

z-index:23;

-webkit-transform:translateX(255px)translateZ(-300px)rotateY(-45deg);

-ms-transform:translateX(255px)translateZ(-300px)rotateY(-45deg);

transform:perspective(500px)translateX(300px)translateZ(-253px)rotateY(-45deg);

-webkit-box-reflect:below10px-webkit-gradient(linear,lefttop,leftbottom,from(transparent),color-stop(30%,transparent),to(rgba(250,250,250,0.3)));

}

.swiper.b{

opacity:1;

z-index:33;

-webkit-box-reflect:below10px-webkit-gradient(linear,lefttop,leftbottom,from(transparent),color-stop(30%,transparent),to(rgba(250,250,250,0.3)));

transform:translateX(0)translateZ(-100px)rotateY(0deg)

}

.swiper.c{

opacity:1;

z-index:23;

-webkit-box-reflect:below10px-webkit-gradient(linear,lefttop,leftbottom,from(transparent),color-stop(30%,transparent),to(rgba(250,250,250,0.3)));

-webkit-transform:translateX(255px)translateZ(-300px)rotateY(-45deg);

-ms-transform:translateX(255px)translateZ(-300px)rotateY(-45deg);

transform:perspective(500px)translateX(-300px)translateZ(-253px)rotateY(45deg);

}

.swiper.dd{

opacity:0;

z-index:-1;

-webkit-transform:translateX(0)translateZ(-300px)rotateY(0);

-ms-transform:translateX(0)translateZ(-300px)rotateY(0);

transform:perspective(500px)translateX(0)translateZ(-253px)rotateY(0);

}

/style

/head

body

div

divid="swiper"

div1/div

div2/div

div3/div

div4/div

div5/div

div6/div

div7/div

div8/div

div9/div

/div

/div

script

consttime=3000;

//自动播放速度

varindex=0

//索引

constswiperitem=document.getElementById('swiper')//获取父元素

constswiper=swiperitem.getElementsByTagName('div')//获取合集

//

自动轮播

varsetTime=setInterval(()={

if(indexswiper.length-1){

index++

}else{

index=0

}

style()

},time)

//点解切换

for(leti=0;iswiper.length;i++){

swiper[i].onclick=function(){

if(i===index)return

index=i

style()

}

}

//鼠标移入暂停

swiperitem.onmouseover

=function(){

clearInterval(setTime)

}

//鼠标移出继续轮播

swiperitem.onmouseout

=function(){

setTime=setInterval(()={

if(indexswiper.length-1){

index++

}else{

index=0

}

style()

},time)

}

//滚动事件

functionstyle(){

console.log(index)

for(leti=0;iswiper.length;i++){

swiper[i].className='swiper-timedd'

}

if(index===swiper.length-1){

swiper[index].className='swiper-timeb'

swiper[0].className='swiper-timea'

swiper[index-1].className='swiper-timec'

}elseif(index===0){

swiper[index].className='swiper-timeb'

swiper[index+1].className='swiper-timea'

swiper[swiper.length-1].className='swiper-timec'

}