js+css實現(xiàn)卡片輪播圖效果
本文實例為大家分享了js+css實現(xiàn)卡片輪播圖效果的具體代碼,供大家參考,具體內(nèi)容如下
實現(xiàn)點擊的時候切換卡片,自動輪播,鼠標(biāo)移入暫停,移出繼續(xù)輪播,有動畫事件
效果就是這樣
下面是代碼
<html lang="en"> <head> ? ? <meta charset="UTF-8"> ? ? <meta http-equiv="X-UA-Compatible" content="IE=edge"> ? ? <meta name="viewport" content="width=device-width, initial-scale=1.0"> ? ? <title>Document</title> ? ? <style> ? ? ? ? .box { ? ? ? ? ? ? width: 680px; ? ? ? ? ? ? padding: 50px; ? ? ? ? ? ? margin: auto; ? ? ? ? ? ? margin-top: 300px; ? ? ? ? } ? ? ? ? .swiper, ? ? ? ? #swiper { ? ? ? ? ? ? width: 830px; ? ? ? ? ? ? height: 200px; ? ? ? ? ? ? position: relative; ? ? ? ? } ? ? ? ? .swiper div { ? ? ? ? ? ? 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; ? ? ? ? } ? ? ? ? .swiper div:nth-child(1) { ? ? ? ? ? ? background: #1ebe09; ? ? ? ? } ? ? ? ? .swiper div:nth-child(2) { ? ? ? ? ? ? background: #323a31; ? ? ? ? } ? ? ? ? .swiper div:nth-child(3) { ? ? ? ? ? ? background: #0985be; ? ? ? ? } ? ? ? ? .swiper div:nth-child(4) { ? ? ? ? ? ? background: #090cbe; ? ? ? ? } ? ? ? ? .swiper div:nth-child(5) { ? ? ? ? ? ? background: #be5109; ? ? ? ? } ? ? ? ? .swiper div:nth-child(6) { ? ? ? ? ? ? background: #be09af; ? ? ? ? } ? ? ? ? .swiper div:nth-child(7) { ? ? ? ? ? ? background: #be8e09; ? ? ? ? } ? ? ? ? .swiper div:nth-child(8) { ? ? ? ? ? ? background: #be0909; ? ? ? ? } ? ? ? ? .swiper div: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: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.3))); ? ? ? ? } ? ? ? ? .swiper .b { ? ? ? ? ? ? opacity: 1; ? ? ? ? ? ? z-index: 33; ? ? ? ? ? ? -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, 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: below 10px -webkit-gradient(linear, left top, left bottom, 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 class="box"> ? ? ? ? <div class="swiper" id="swiper"> ? ? ? ? ? ? <div class="swiper-time b">1</div> ? ? ? ? ? ? <div class="swiper-time a">2</div> ? ? ? ? ? ? <div class="swiper-time dd">3</div> ? ? ? ? ? ? <div class="swiper-time dd">4</div> ? ? ? ? ? ? <div class="swiper-time dd">5</div> ? ? ? ? ? ? <div class="swiper-time dd">6</div> ? ? ? ? ? ? <div class="swiper-time dd">7</div> ? ? ? ? ? ? <div class="swiper-time dd">8</div> ? ? ? ? ? ? <div class="swiper-time c">9</div> ? ? ? ? </div> ? ? </div> ? ? <script> ? ? ? ? const time = 3000 ; ?//自動播放速度 ? ? ? ? var index = 0 ?// 索引 ? ? ? ? const swiperitem = document.getElementById('swiper') //獲取父元素 ? ? ? ? const swiper = swiperitem.getElementsByTagName('div') //獲取合集 ? ? ? ? ? ? ? ? // ? ?自動輪播 ? ? ? ? var setTime = setInterval(() => { ? ? ? ? ? ? if (index < swiper.length-1) { ? ? ? ? ? ? ? ? index++ ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? index = 0 ? ? ? ? ? ? } ? ? ? ? ? ? style() ? ? ? ? }, time) ? ? ? ? // 點解切換 ? ? ? ? for (let i = 0; i < swiper.length; i++) { ? ? ? ? ? ? swiper[i].onclick = function () { ? ? ? ? ? ? ? ? if (i === index) return ? ? ? ? ? ? ? ? index = i ? ? ? ? ? ? ? ? style() ? ? ? ? ? ? } ? ? ? ? } ? ? ? ? // 鼠標(biāo)移入暫停 ? ? ? ? swiperitem.onmouseover ?= function () { ? ? ? ? ? ? clearInterval(setTime) ? ? ? ? } ? ? ? ? // 鼠標(biāo)移出繼續(xù)輪播 ? ? ? ? swiperitem.onmouseout ?= function () { ? ? ? ? ? ? setTime = setInterval(() => { ? ? ? ? ? ? ? ? if (index < swiper.length-1) { ? ? ? ? ? ? ? ? ? ? index++ ? ? ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? ? ? index = 0 ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? style() ? ? ? ? ? ? }, time) ? ? ? ? } ? ? ? ? // 滾動事件 ? ? ? ? function style() { ? ? ? ? ? ? console.log(index) ? ? ? ? ? ? for (let i = 0; i < swiper.length; i++) { ? ? ? ? ? ? ? ? swiper[i].className = 'swiper-time dd' ? ? ? ? ? ? } ? ? ? ? ? ? if (index === swiper.length - 1) { ? ? ? ? ? ? ? ? swiper[index].className = 'swiper-time b' ? ? ? ? ? ? ? ? swiper[0].className = 'swiper-time a' ? ? ? ? ? ? ? ? swiper[index - 1].className = 'swiper-time c' ? ? ? ? ? ? } else if (index === 0) { ? ? ? ? ? ? ? ? swiper[index].className = 'swiper-time b' ? ? ? ? ? ? ? ? swiper[index + 1].className = 'swiper-time a' ? ? ? ? ? ? ? ? swiper[swiper.length - 1].className = 'swiper-time c' ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? swiper[index].className = 'swiper-time b' ? ? ? ? ? ? ? ? swiper[index + 1].className = 'swiper-time a' ? ? ? ? ? ? ? ? swiper[index - 1].className = 'swiper-time c' ? ? ? ? ? ? } ? ? ? ? } ? ? </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript下function聲明一些小結(jié)
function聲明一些東西,我們都知道function和var一樣是預(yù)處理的在js里面,但是到底什么是函數(shù)聲明呢,我們來看幾個例子2007-12-12bootstrap3使用bootstrap datetimepicker日期插件
這篇文章主要為大家詳細(xì)介紹了bootstrap3中使用bootstrap datetimepicker日期插件的用法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05JavaScript實現(xiàn)鼠標(biāo)滑過處生成氣泡的方法
這篇文章主要介紹了JavaScript實現(xiàn)鼠標(biāo)滑過處生成氣泡的方法,涉及鼠標(biāo)事件與頁面樣式的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05微信小程序授權(quán)獲取用戶詳細(xì)信息openid的實例詳解
這篇文章主要介紹了微信小程序授權(quán)獲取用戶詳細(xì)信息openid的實例詳解的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-09-09js實現(xiàn)隨機(jī)點名系統(tǒng)(實例講解)
下面小編就為大家?guī)硪黄猨s實現(xiàn)隨機(jī)點名系統(tǒng)(實例講解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10