js+css實現(xiàn)卡片輪播圖效果

第js+css實現(xiàn)卡片輪播圖效果本文實例為大家分享了js+css實現(xiàn)卡片輪播圖效果的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)點擊的時候切換卡片，自動輪播，鼠標移入暫停，移出繼續(xù)輪播,有動畫事件

效果就是這樣

下面是代碼

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)

}

//鼠標移出繼續(xù)輪播

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'

}