js+css實現卡片輪播圖效果

更新時間：2022年02月23日 09:37:49 作者：little_shallot

這篇文章主要為大家詳細介紹了js+css實現卡片輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

實現點擊的時候切換卡片，自動輪播，鼠標移入暫停，移出繼續(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()
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? // 鼠標移入暫停
? ? ? ? swiperitem.onmouseover ?= function () {
? ? ? ? ? ? clearInterval(setTime)
? ? ? ? }
? ? ? ? // 鼠標移出繼續(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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: