1"use strict";(self.webpackChunkcode_fictionist=self.webpackChunkcode_fictionist||[]).push([[4835],{7298:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>l});const s=JSON.parse('{"id":"series/iThome_2024/day_29","title":"Day 29 - \u8f2a\u64ad (Carousel)","description":"\u4eca\u5929\u60f3\u4e86\u4e00\u5929\uff0c\u4eca\u5929\u96d6\u7136\u662f\u7b2c 29 \u5929\uff0c\u4f46\u660e\u5929\u9810\u8a08\u662f\u5beb\u500b 30 \u5929\u5fc3\u5f97\u70ba\u9019\u6b21\u9435\u4eba\u8cfd\u6536\u500b\u5c3e\uff0c\u6240\u4ee5\u56b4\u683c\u4f86\u8b1b\u4eca\u5929\u662f\u5beb\u6280\u8853\u6587\u7ae0\u7684\u6700\u5f8c\u4e00\u5929\u3002","source":"@site/docs/series/01-iThome_2024/29-day_29.mdx","sourceDirName":"series/01-iThome_2024","slug":"/series/iThome_2024/day_29","permalink":"/docs/series/iThome_2024/day_29","draft":false,"unlisted":false,"tags":[],"version":"current","lastUpdatedAt":1766374113000,"sidebarPosition":29,"frontMatter":{"title":"Day 29 - \u8f2a\u64ad (Carousel)"},"sidebar":"series","previous":{"title":"Day 28 - \u5143\u7d20\u62d6\u62c9\u79fb\u52d5","permalink":"/docs/series/iThome_2024/day_28"},"next":{"title":"Day 30 - \u9435\u4eba 30 \u611f\u60f3","permalink":"/docs/series/iThome_2024/day_30"}}');var r=t(74848),i=t(28453);const o={title:"Day 29 - \u8f2a\u64ad (Carousel)"},a=void 0,c={},l=[];function d(e){const n={br:"br",code:"code",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["\u4eca\u5929\u60f3\u4e86\u4e00\u5929\uff0c\u4eca\u5929\u96d6\u7136\u662f\u7b2c 29 \u5929\uff0c\u4f46\u660e\u5929\u9810\u8a08\u662f\u5beb\u500b 30 \u5929\u5fc3\u5f97\u70ba\u9019\u6b21\u9435\u4eba\u8cfd\u6536\u500b\u5c3e\uff0c\u6240\u4ee5\u56b4\u683c\u4f86\u8b1b\u4eca\u5929\u662f\u5beb\u6280\u8853\u6587\u7ae0\u7684\u6700\u5f8c\u4e00\u5929\u3002",(0,r.jsx)(n.br,{}),"\n","\u65e2\u7136\u662f\u6700\u5f8c\u4e00\u5929\uff0c\u5230\u5e95\u5beb\u4e9b\u5565\u597d\u54a7 ~\uff1f",(0,r.jsx)(n.br,{}),"\n","\u60f3\u4e86\u4e00\u5929\u9f41\uff0c\u5f8c\u4f86\u60f3\u5230\u4e4b\u524d\u5728\u7528 Vuetify \u90a3\u4e9b UI framework \u6642\uff0c\u6642\u5e38\u6703\u770b\u5230\u8f2a\u64ad\u7684\u6548\u679c\uff0c\u81ea\u5df1\u904e\u53bb\u5728\u5e6b\u670b\u53cb\u505a\u7db2\u7ad9\u6642\u4e5f\u7528\u904e Bootstrap \u7684\u8f2a\u64ad\uff0c\u6240\u4ee5\u4eca\u5929\u4e7e\u8106\u5c31\u4f86\u5beb\u4e00\u4e0b\u5982\u4f55\u4e0d\u9760 UI framework\uff0c\u624b\u5de5\u523b\u4e00\u500b\u8f2a\u64ad\u6548\u679c\u3002"]}),"\n",(0,r.jsxs)(n.p,{children:["\u4eca\u5929\u7684 code \u6703\u8ddf\u6628\u5929\u4e00\u6a23\u6709 HTML\u3001CSS\u3001JavaScript \u4e09\u500b\u90e8\u5206\uff0c\u4f46\u4eca\u5929 CSS \u4e5f\u662f\u91cd\u8981\u7684\u4e3b\u89d2\u4e4b\u4e00\uff0c\u6211\u5011\u6703\u7528\u5230\u6211\u5011\u9019\u6b21\u9435\u4eba\u8cfd\u4e5f\u6642\u5e38\u7528\u5230\u7684 ",(0,r.jsx)(n.code,{children:"transform"}),"\u3002"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<div class="carousel">\n <div class="carousel-item" id="item1">1</div>\n <div class="carousel-item" id="item2">2</div>\n <div class="carousel-item" id="item3">3</div>\n</div>\n'})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-css",children:".carousel {\n display: flex;\n justify-content: center;\n align-items: center;\n perspective: 1000px;\n width: 100%;\n height: 300px;\n overflow: hidden;\n position: relative;\n}\n\n.carousel-item {\n position: absolute;\n width: 300px;\n height: 200px;\n background-color: #61dafb;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 24px;\n color: white;\n transform-origin: center center;\n transition: transform 0.5s ease-in-out;\n transform-style: preserve-3d;\n border-radius: 10px;\n}\n\n.carousel-item.active {\n opacity: 1;\n transform: rotateY(0deg) translateX(0) scale(1.2);\n}\n\n.carousel-item.left {\n opacity: 0.5;\n transform: rotateY(-30deg) translateX(-300px) scale(0.8);\n}\n\n.carousel-item.right {\n opacity: 0.5;\n transform: rotateY(30deg) translateX(300px) scale(0.8);\n}\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-javascript",children:'let items = document.querySelectorAll(".carousel-item");\nlet currentIndex = 0;
1\n\nfunction updateCarousel() {\n items.forEach((item, index) => {\n item.classList.remove("active", "left", "right");\n });\n\n let previousIndex = (currentIndex - 1 + items.length) % items.length;\n let nextIndex = (currentIndex + 1) % items.length;\n\n items[currentIndex].classList.add("active");\n items[previousIndex].classList.add("left");\n items[nextIndex].classList.add("right");\n}\n\nfunction nextSlide() {\n currentIndex = (currentIndex + 1) % items.length;\n updateCarousel();\n}\n\nupdateCarousel();\nsetInterval(nextSlide, 2000);\n'})}),"\n",(0,r.jsx)("iframe",{height:"600",width:"100%",title:"day 29 - carousel",src:"https://codepen.io/ChungYingHo/embed/WNqPpBZ?default-tab=html%2Cresult",frameborder:"no",loading:"lazy",allowtransparency:"true",allowfullscreen:"true",children:(0,r.jsxs)(n.p,{children:["See the Pen ",(0,r.jsx)("a",{href:"https://codepen.io/ChungYingHo/pen/WNqPpBZ",children:"\nday 29 - carousel"})," by ChungYingHo (",(0,r.jsx)("a",{href:"https://codepen.io/ChungYingHo",children:"@ChungYingHo"}),")\non ",(0,r.jsx)("a",{href:"https://codepen.io",children:"CodePen"}),"."]})}),"\n",(0,r.jsxs)(n.p,{children:["\u5148\u8aaa JavaScript \u597d\u4e86\uff0c\u5176\u5be6 JavaScript \u7684\u90e8\u5206\u53ea\u662f\u70ba\u4e86\u53ef\u4ee5\u81ea\u52d5\u8f2a\u64ad\u800c\u5df2\u3002",(0,r.jsx)(n.br,{}),"\n","\u9019\u88e1\u4f7f\u7528\u4e86 ",(0,r.jsx)(n.code,{children:"querySelectorAll()"})," \u53d6\u5f97\u6240\u6709 ",(0,r.jsx)(n.code,{children:".carousel-item"})," \u5143\u7d20\uff0c\u4e26\u900f\u904e ",(0,r.jsx)(n.code,{children:"setInterval()"})," \u6bcf\u9694 2 \u79d2\u905e\u589e ",(0,r.jsx)(n.code,{children:"currentIndex"}),"\uff08\u5373\u986f\u793a\u5728\u6b63\u4e2d\u592e\u7684\u8f2a\u64ad\u9805\u76ee\uff09\u3002",(0,r.jsx)(n.br,{}),"\n",(0,r.jsx)(n.code,{children:"updateCarousel()"})," \u51fd\u5f0f\u5247\u662f\u6839\u64da ",(0,r.jsx)(n.code,{children:"currentIndex"})," \u7684\u503c\uff0c\u70ba\u5de6\u3001\u4e2d\u3001\u53f3\u4e09\u500b\u8f2a\u64ad\u9805\u76ee\u5206\u5225\u6dfb\u52a0\u4e0d\u540c\u7684 ",(0,r.jsx)(n.code,{children:"class"}),"\uff0c\u4ee5\u89f8\u767c\u76f8\u61c9\u7684 CSS \u8f49\u63db\u6548\u679c\u3002",(0,r.jsx)(n.br,{}),"\n","\u6bcf\u500b\u9805\u76ee\u6839\u64da\u5b83\u5728\u8f2a\u64ad\u4e2d\u7684\u4f4d\u7f6e\uff08\u5de6\u3001\u4e2d\u3001\u53f3\uff09\u88ab\u5206\u5225\u5957\u7528\u4e0d\u540c\u7684 ",(0,r.jsx)(n.code,{children:"transform"}),"\uff0c\u8b93\u4e2d\u9593\u9805\u76ee\u653e\u5927\uff0c\u5169\u5074\u9805\u76ee\u7e2e\u5c0f\u4e26\u65cb\u8f49\u4f4d\u79fb\uff0c\u9032\u800c\u5be6\u73fe\u4e00\u7a2e\u770b\u8d77\u4f86\u6709\u4e9b 3D \u7684\u8f2a\u64ad\u6548\u679c\u3002"]})]})}function u(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},28453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>a});var s=t(96540);const r={},i=s.createContext(r);function o(e){const n=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.