index.html 53 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Leadmuta - AI for Science</title>
  7. <meta name="description"
  8. content="Leading IT agency providing web development, mobile apps, cloud solutions, and digital marketing. Transform your business with cutting-edge technology solutions.">
  9. <meta name="keywords" content="IT services, web development, mobile apps, cloud solutions, digital marketing">
  10. <!-- Favicon -->
  11. <link rel="icon" type="image/png" href="assets/images/lmdlogo/lmd3.png">
  12. <!-- CSS Files -->
  13. <link rel="stylesheet" href="assets/css/aos.css">
  14. <link rel="stylesheet" href="assets/css/universal-slider.css">
  15. <link rel="stylesheet" href="assets/css/hover3d-effects.css">
  16. <link rel="stylesheet" href="assets/css/auto-progress-bar.css">
  17. <!-- General CSS files -->
  18. <link rel="stylesheet" href="assets/css/globals.css">
  19. <link rel="stylesheet" href="assets/css/style.css">
  20. <link rel="stylesheet" href="assets/css/mj.css">
  21. <link rel="stylesheet" href="assets/css/gd2.css">
  22. <link rel="stylesheet" href="assets/css/cpxx.css">
  23. <style>
  24. body {
  25. margin: 0;
  26. padding: 0;
  27. }
  28. video {
  29. position: fixed;
  30. top: 0;
  31. left: 0;
  32. min-width: 100%;
  33. min-height: 100%;
  34. z-index: -1;
  35. }
  36. </style>
  37. </head>
  38. <body> <!-- class="body-1" -->
  39. <video autoplay muted loop playsinline preload="auto">
  40. <source src="assets/video/bot.mp4" type="video/mp4">
  41. </video>
  42. <div id="particles-js" class="particles-background"></div>
  43. <!-- Tech Page Loader -->
  44. <div id="page-loader" class="page-loader">
  45. <div class="loader-container">
  46. <div class="loader-content">
  47. <!-- Advanced Tech Spinner Only -->
  48. <div class="loader-spinner">
  49. <div class="spinner-ring">
  50. <div></div>
  51. </div>
  52. </div>
  53. <!-- Advanced Progress Bar -->
  54. <div class="loader-progress">
  55. <div class="progress-bar"></div>
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. <!-- Header -->
  61. <header class="header">
  62. <div class="container d-flex-between">
  63. <!-- Logo -->
  64. <div class="logo position-relative">
  65. <img class="image" id="lmdlogo" src="assets/images/lmdlogo/lmd2.png" alt="Logo">
  66. <a class="overlay-link" href="index.html"></a>
  67. </div>
  68. <!-- Navigation -->
  69. <!-- Navigation -->
  70. <nav class="navbar" id="navbar">
  71. <ul class="nav-menu">
  72. <li><a href="about-us.html" class="nav-link">首页</a></li>
  73. <li class="dropdown">
  74. <a class="dropdown-toggle" data-dropdown="home-dropdown">产品中心</a>
  75. <ul class="dropdown-menu" id="home-dropdown">
  76. <li>
  77. <a href="index.html" class="dropdown-item">智能仓储机器人</a>
  78. </li>
  79. <li><a href="heroedge.html" class="dropdown-item">巡检机器人</a></li>
  80. <li><a href="home-page-2.html" class="dropdown-item">AI机器人及灵巧手</a></li>
  81. </ul>
  82. </li>
  83. <li class="dropdown">
  84. <a class="dropdown-toggle" data-dropdown="blog-dropdown">视频展示</a>
  85. <ul class="dropdown-menu" id="blog-dropdown">
  86. <li><a href="blog-column-1.html" class="dropdown-item">智能仓储</a></li>
  87. <li><a href="blog-column-2.html" class="dropdown-item">AI机器人</a></li>
  88. <li><a href="blog-column-3.html" class="dropdown-item">AI机器人灵巧手</a></li>
  89. </ul>
  90. </li>
  91. <li class="dropdown">
  92. <a class="dropdown-toggle" data-dropdown="blog-dropdown">应用案例</a>
  93. <ul class="dropdown-menu" id="blog-dropdown">
  94. <li><a href="blog-column-1.html" class="dropdown-item">半导体及SMT行业</a></li>
  95. <li><a href="blog-column-2.html" class="dropdown-item">政企及服务行业</a></li>
  96. <li><a href="blog-column-3.html" class="dropdown-item">生物医药行业</a></li>
  97. </ul>
  98. </li>
  99. <li class="dropdown">
  100. <a class="dropdown-toggle" data-dropdown="blog-dropdown">关于我们</a>
  101. <ul class="dropdown-menu" id="blog-dropdown">
  102. <li><a href="blog-column-1.html" class="dropdown-item">公司介绍</a></li>
  103. <li><a href="blog-column-2.html" class="dropdown-item">发展历程</a></li>
  104. <li><a href="blog-column-3.html" class="dropdown-item">企业荣誉</a></li>
  105. <li><a href="blog-column-3.html" class="dropdown-item">合作伙伴</a></li>
  106. </ul>
  107. </li>
  108. <li><a href="services.html" class="nav-link">新闻动态</a></li>
  109. <li><a href="portfolio.html" class="nav-link">联系我们</a></li>
  110. </ul>
  111. </nav>
  112. <!-- Get Quotes Button -->
  113. <div class="actions d-flex-center">
  114. <!-- <a href="contact-us.html" class="btn btn-get-quotes">Get Quotes</a> -->
  115. <div class="theme-switcher">
  116. <button id="theme-toggle" class="theme-toggle-btn" aria-label="Toggle dark mode">
  117. <svg id="theme-toggle-light-icon" class="sun-icon" xmlns="http://www.w3.org/2000/svg"
  118. viewBox="0 0 24 24" fill="currentColor">
  119. <path
  120. d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.106a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.894 17.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.894 17.894a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM4.5 12a.75.75 0 01-.75.75H1.5a.75.75 0 010-1.5h2.25a.75.75 0 01.75.75zM6.106 6.106a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
  121. </svg>
  122. <svg id="theme-toggle-dark-icon" class="moon-icon" xmlns="http://www.w3.org/2000/svg"
  123. viewBox="0 0 24 24" fill="currentColor">
  124. <path fill-rule="evenodd"
  125. d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 004.463-.69a.75.75 0 01.981.981A10.501 10.501 0 0118 19.5a10.5 10.5 0 01-10.5-10.5 10.5 10.5 0 011.718-5.528.75.75 0 01.81-.162z"
  126. clip-rule="evenodd" />
  127. </svg>
  128. </button>
  129. </div>
  130. </div>
  131. <!-- Mobile Menu Toggle -->
  132. <button class="mobile-menu-toggle" id="mobile-menu-toggle">
  133. <span class="hamburger-line"></span>
  134. <span class="hamburger-line"></span>
  135. <span class="hamburger-line"></span>
  136. </button>
  137. </div>
  138. </header>
  139. <!-- Hero -->
  140. <section class="hero container flex-column-center p-3">
  141. <div class="hero-content-home-1">
  142. <div class="hero-info">
  143. <div class="hero-info-content flex-column-center pb-5">
  144. <h2 class="text-white heading-hero text-shadow" data-aos="fade-down" data-aos-duration="800"
  145. data-aos-delay="100">
  146. AI for Science
  147. </h2>
  148. <h2 class="text-white heading-hero text-shadow" data-aos="fade-down" data-aos-duration="800"
  149. data-aos-delay="100">
  150. 专注AI机器人
  151. </h2>
  152. <h2 class="text-white heading-hero text-shadow" data-aos="fade-down" data-aos-duration="800"
  153. data-aos-delay="100">
  154. 研发生产与制造
  155. </h2>
  156. <!-- <div data-aos="fade-right"
  157. data-aos-duration="600"
  158. data-aos-delay="300">
  159. <h3 class="text-primary text-shadowl--letterpress">
  160. In <span id="typed-element"></span>
  161. </h3>
  162. </div> -->
  163. <p class="text-white w-75 text-shadow--strong" data-aos="fade-up" data-aos-duration="600"
  164. data-aos-delay="500">
  165. Focusing on the research and development, production and manufacturing of AI robots.
  166. </p>
  167. </div>
  168. <!-- <div class="cta w-100">
  169. <div class="social-links pb-4 d-flex-between"
  170. data-aos="fade-in"
  171. data-aos-duration="400">
  172. <a href="javascript:void(0)" class="social-link icon-transition sm"
  173. data-aos="zoom-in"
  174. data-aos-duration="300"
  175. data-aos-delay="700">
  176. <svg><use xlink:href="#twitter-x"></use></svg>
  177. </a>
  178. <a href="javascript:void(0)" class="social-link icon-transition sm"
  179. data-aos="zoom-in"
  180. data-aos-duration="300"
  181. data-aos-delay="750">
  182. <svg><use xlink:href="#facebook"></use></svg>
  183. </a>
  184. <a href="javascript:void(0)" class="social-link icon-transition sm"
  185. data-aos="zoom-in"
  186. data-aos-duration="300"
  187. data-aos-delay="800">
  188. <svg><use xlink:href="#linkedin"></use></svg>
  189. </a>
  190. <a href="javascript:void(0)" class="social-link icon-transition sm"
  191. data-aos="zoom-in"
  192. data-aos-duration="300"
  193. data-aos-delay="850">
  194. <svg><use xlink:href="#instagram"></use></svg>
  195. </a>
  196. </div>
  197. <div class="cta-buttons w-100 d-flex gap-4">
  198. <a href="contact-us.html" class="btn btn-get-quotes"
  199. data-aos="fade-right"
  200. data-aos-duration="500"
  201. data-aos-delay="900">
  202. Get Quotes
  203. </a>
  204. <a href="contact-us.html" class="btn btn-outline"
  205. data-aos="fade-left"
  206. data-aos-duration="500"
  207. data-aos-delay="950">
  208. Get Started
  209. </a>
  210. </div>
  211. </div> -->
  212. </div>
  213. </div>
  214. </section>
  215. <!-- Main 1 -->
  216. <div class="main d-flex-center pt-8 pb-8">
  217. <!-- Main Content -->
  218. <div class="container main-content">
  219. <!-- Services section -->
  220. <!-- <section class="service-cards-modern">
  221. <div class="d-flex-baseline-between pb-5"
  222. data-aos="fade-down"
  223. data-aos-duration="600"
  224. data-aos-delay="0">
  225. <h2>Our Services</h2>
  226. <a href="services.html" class="btn btn-primary">See Services</a>
  227. </div>
  228. <div class="services-grid">
  229. <div class="service-card"
  230. data-aos="fade-up"
  231. data-aos-delay="0">
  232. <div class="service-icon">
  233. <svg><use xlink:href="#monitor-code"></use></svg>
  234. </div>
  235. <div class="service-description">
  236. <h3>Web Development</h3>
  237. <p>Professional web solutions with modern technologies and responsive designs.</p>
  238. </div>
  239. <a class="overlay-link" href="javascript:void(0)"></a>
  240. </div>
  241. <div class="service-card"
  242. data-aos="fade-up"
  243. data-aos-delay="100">
  244. <div class="service-icon">
  245. <svg><use xlink:href="#phone"></use></svg>
  246. </div>
  247. <div class="service-description">
  248. <h4>Mobile App Development</h4>
  249. <p>Native and cross-platform mobile applications for iOS and Android.</p>
  250. </div>
  251. <a class="overlay-link" href="javascript:void(0)"></a>
  252. </div>
  253. <div class="service-card"
  254. data-aos="fade-up"
  255. data-aos-delay="200">
  256. <div class="service-icon">
  257. <svg><use xlink:href="#cloud-iot-2"></use></svg>
  258. </div>
  259. <div class="service-description">
  260. <h4>Cloud Solutions</h4>
  261. <p>Scalable cloud infrastructure and deployment solutions for your business.</p>
  262. </div>
  263. <a class="overlay-link" href="javascript:void(0)"></a>
  264. </div>
  265. <div class="service-card"
  266. data-aos="fade-up"
  267. data-aos-delay="0">
  268. <div class="service-icon">
  269. <svg><use xlink:href="#seo-monitor"></use></svg>
  270. </div>
  271. <div class="service-description">
  272. <h4>Digital Marketing</h4>
  273. <p>Strategic digital marketing campaigns to boost your online presence.</p>
  274. </div>
  275. <a class="overlay-link" href="javascript:void(0)"></a>
  276. </div>
  277. <div class="service-card"
  278. data-aos="fade-up"
  279. data-aos-delay="100">
  280. <div class="service-icon">
  281. <svg><use xlink:href="#vector-nodes-6"></use></svg>
  282. </div>
  283. <div class="service-description">
  284. <h4>UX/UI Design</h4>
  285. <p>User-centered design experiences that engage and convert your audience.</p>
  286. </div>
  287. <a class="overlay-link" href="javascript:void(0)"></a>
  288. </div>
  289. <div class="service-card"
  290. data-aos="fade-up"
  291. data-aos-delay="200">
  292. <div class="service-icon">
  293. <svg><use xlink:href="#database-2"></use></svg>
  294. </div>
  295. <div class="service-description">
  296. <h4>Data Analytics</h4>
  297. <p>Transform your data into actionable insights for better business decisions.</p>
  298. </div>
  299. <a class="overlay-link" href="javascript:void(0)"></a>
  300. </div>
  301. </div>
  302. </section> -->
  303. <!-- About Our Company section -->
  304. <section class="about-our-company">
  305. <div class="about-info pb-4" data-aos="fade-right" data-aos-duration="600" data-aos-delay="0">
  306. <div class="about-texts pb-4">
  307. <h4 class="text-accent">关于我们</h4>
  308. <h2 class="about-info-title">我们专注AI机器人的 研发生产与制造</h2>
  309. <p>
  310. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;苏州立妙达智能科技有限公司由海外高层次归国人才组建,专注于AI+机器人技术的研发应用。公司由苏州立妙达、苏州艾斯达克、厦门优小二、温州铂飞自动化等组成,致力于提供AI
  311. for Science无人实验室、半导体及电子制造智慧物流等综合解决方案。公司产品线涵盖实验室机器人、晶圆机器人、搬运机器人等多种自动化设备。
  312. <br>
  313. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;苏州立妙达智能科技有限公司立志成为中国机器人技术应用领域的领先自主智能体提供商,在智慧实验室与智能制造场景中助力企业提升生产力并推动创新。公司依托机器人技术自动化与AI领域的感知、构思及执行专有技术,其多功能自主智能体擅长独立完成复杂任务,释放人力,专注于实验室与制造场景中的高价值工作,助力企业驾驭智能化转型,为下一代科研、制造等领域的发展做好前瞻布局。
  314. </p>
  315. </div>
  316. <!-- <div class="about-progress">
  317. <div class="custom-progress" data-progress
  318. data-label="IT Consulting"
  319. data-percentage="90"
  320. data-color="var(--color-primary)"
  321. data-bg="var(--color-text-primary)"
  322. data-text-color="var(--color-text-primary)">
  323. </div>
  324. <div class="custom-progress" data-progress
  325. data-label="Web Development"
  326. data-percentage="75"
  327. data-color="var(--color-primary)"
  328. data-bg="var(--color-text-primary)"
  329. data-text-color="var(--color-text-primary)">
  330. </div>
  331. <div class="custom-progress" data-progress
  332. data-label="UX Design"
  333. data-percentage="70"
  334. data-color="var(--color-primary)"
  335. data-bg="var(--color-text-primary)"
  336. data-text-color="var(--color-text-primary)">
  337. </div>
  338. </div> -->
  339. </div>
  340. <div class="about-image" data-hover-3d data-aos="fade-left" data-aos-duration="600"
  341. data-aos-delay="0">
  342. <img src="assets/images/lbimages/关于我们.jpg" alt="About Image">
  343. </div>
  344. </section>
  345. </div>
  346. </div>
  347. <!-- Counting info section -->
  348. <section class="counting-info container">
  349. <div class="counting-content">
  350. <div class="box-counting">
  351. <div class="counts" data-aos="fade-down" data-aos-delay="100">
  352. <svg>
  353. <use xlink:href="#bulb-2"></use>
  354. </svg>
  355. <span class="number" data-counter style="font-size: 250%;">20+</span>
  356. <span class="label" style="font-size: 250%;">行业经验</span>
  357. </div>
  358. <div class="counts" data-aos="fade-up" data-aos-delay="100">
  359. <svg>
  360. <use xlink:href="#message-3-text"></use>
  361. </svg>
  362. <span class="number" data-counter style="font-size: 250%;">200+</span>
  363. <span class="label" style="font-size: 250%;">专利数量</span>
  364. </div>
  365. <div class="counts" data-aos="fade-down" data-aos-delay="100">
  366. <svg>
  367. <use xlink:href="#hand-shake"></use>
  368. </svg>
  369. <span class="number" data-counter style="font-size: 250%;">500+</span>
  370. <span class="label" style="font-size: 250%;">服务案例</span>
  371. </div>
  372. <div class="counts" data-aos="fade-up" data-aos-delay="100">
  373. <svg>
  374. <use xlink:href="#globe-1"></use>
  375. </svg>
  376. <span class="number" data-counter style="font-size: 250%;">30+</span>
  377. <span class="label" style="font-size: 250%;">全球网点</span>
  378. </div>
  379. </div>
  380. </div>
  381. </section>
  382. <!-- Main 2 -->
  383. <!-- <div class="main d-flex-center pt-8 pb-8">
  384. <div class="container main-content">
  385. <section class="step-info">
  386. <div class="d-flex-center pb-5"
  387. data-aos="fade-down"
  388. data-aos-duration="600"
  389. data-aos-delay="0">
  390. <h2 class="heading-lg">Our Processes</h2>
  391. </div>
  392. <div class="box-step-info">
  393. <div class="step up">
  394. <div class="process-info d-flex-center"
  395. data-aos="fade-down"
  396. data-aos-delay="100">
  397. <div class="process-icon">
  398. <svg><use xlink:href="#code-1"></use></svg>
  399. </div>
  400. <div class="process-text">
  401. <span class="text text-shadowl--white">1. WE INVESTIGATE AND PLAN</span>
  402. <p>We analyze your requirements and create a comprehensive strategy tailored to your business goals.</p>
  403. </div>
  404. </div>
  405. </div>
  406. <div class="step right">
  407. <div class="process-info d-flex-center"
  408. data-aos="fade-left"
  409. data-aos-delay="150">
  410. <div class="process-icon">
  411. <svg><use xlink:href="#monitor-code"></use></svg>
  412. </div>
  413. <div class="process-text">
  414. <span class="text text-shadowl--white">2. WE CO-CREATE AND DEVELOP</span>
  415. <p>Working together, we build innovative solutions using cutting-edge technology and best practices.</p>
  416. </div>
  417. </div>
  418. </div>
  419. <div class="central-image">
  420. <img class="image" src="assets/images/backgrounds/process.jpg" alt="Process">
  421. </div>
  422. <div class="step down">
  423. <div class="process-info d-flex-center"
  424. data-aos="fade-up"
  425. data-aos-delay="200">
  426. <div class="process-icon">
  427. <svg><use xlink:href="#refresh-user-1"></use></svg>
  428. </div>
  429. <div class="process-text">
  430. <span class="text text-shadowl--white">3. WE ACCOMPANY AND GUARANTEE</span>
  431. <p>We provide ongoing support and maintenance to ensure your solution performs optimally over time.</p>
  432. </div>
  433. </div>
  434. </div>
  435. <div class="step left">
  436. <div class="process-info d-flex-center"
  437. data-aos="fade-right"
  438. data-aos-delay="250">
  439. <div class="process-icon">
  440. <svg><use xlink:href="#hand-shake"></use></svg>
  441. </div>
  442. <div class="process-text">
  443. <span class="text text-shadowl--white">4. WE DELIVER AND LAUNCH</span>
  444. <p>We deploy your solution with thorough testing and seamless implementation.</p>
  445. </div>
  446. </div>
  447. </div>
  448. </div>
  449. </section>
  450. </div>
  451. </div> -->
  452. <!-- <div class="main d-flex-center pt-8 pb-8">
  453. <div class="container main-content">
  454. <section class="pricing-plants">
  455. <div class="text-center pb-5"
  456. data-aos="fade-down"
  457. data-aos-duration="600"
  458. data-aos-delay="0">
  459. <h2 class="heading-lg">Pricing Plans</h2>
  460. <p>Clear, simple, and flexible plans for your business.</p>
  461. </div>
  462. <div class="options-plants">
  463. <div class="plants"
  464. data-aos="fade-left"
  465. data-aos-delay="150">
  466. <div class="plant-header">
  467. <h2 class="mb-0">Basic</h2>
  468. <p>Perfect for small businesses and startups</p>
  469. </div>
  470. <div class="price d-flex-center">
  471. <span class="price-main">$37 <span class="price-discount">$50</span></span>
  472. </div>
  473. <div class="d-flex-center">
  474. <a href="javascript:void(0)" class="btn btn-primary">Buy Basic Plan</a>
  475. </div>
  476. <div class="benefits">
  477. <div class="line"></div>
  478. <ul class="benefits-list">
  479. <li class="benefit-item">
  480. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  481. <span class="text">Up to 5 Pages Website</span>
  482. </li>
  483. <li class="benefit-item">
  484. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  485. <span class="text">Mobile Responsive Design</span>
  486. </li>
  487. <li class="benefit-item">
  488. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  489. <span class="text">Basic SEO Optimization</span>
  490. </li>
  491. <li class="benefit-item">
  492. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  493. <span class="text">Contact Form Integration</span>
  494. </li>
  495. <li class="benefit-item">
  496. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  497. <span class="text">1 Month Free Support</span>
  498. </li>
  499. <li class="benefit-item">
  500. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  501. <span class="text">SSL Certificate</span>
  502. </li>
  503. <li class="benefit-item unavailable">
  504. <div class="circle-x-svg">
  505. <svg viewBox="0 0 24 24" width="18" height="18">
  506. <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
  507. <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
  508. <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
  509. </svg>
  510. </div>
  511. <span class="text">E-commerce Functionality</span>
  512. </li>
  513. <li class="benefit-item unavailable">
  514. <div class="circle-x-svg">
  515. <svg viewBox="0 0 24 24" width="18" height="18">
  516. <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
  517. <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
  518. <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
  519. </svg>
  520. </div>
  521. <span class="text">Advanced Analytics</span>
  522. </li>
  523. <li class="benefit-item unavailable">
  524. <div class="circle-x-svg">
  525. <svg viewBox="0 0 24 24" width="18" height="18">
  526. <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
  527. <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
  528. <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
  529. </svg>
  530. </div>
  531. <span class="text">Priority Support</span>
  532. </li>
  533. </ul>
  534. </div>
  535. </div>
  536. <div class="plants most-popular"
  537. data-aos="fade-down"
  538. data-aos-delay="100">
  539. <div class="tag-most-popular">
  540. <span>Most Popular</span>
  541. </div>
  542. <div class="plant-header">
  543. <h2 class="mb-0">Pro</h2>
  544. <p>Ideal for growing businesses</p>
  545. </div>
  546. <div class="price d-flex-center">
  547. <span class="price-main">$57 <span class="price-discount">$70</span></span>
  548. </div>
  549. <div class="d-flex-center">
  550. <a href="javascript:void(0)" class="btn btn-primary">Buy Pro Plan</a>
  551. </div>
  552. <div class="benefits">
  553. <div class="line"></div>
  554. <ul class="benefits-list">
  555. <li class="benefit-item">
  556. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  557. <span class="text">Up to 5 Pages Website</span>
  558. </li>
  559. <li class="benefit-item">
  560. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  561. <span class="text">Mobile Responsive Design</span>
  562. </li>
  563. <li class="benefit-item">
  564. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  565. <span class="text">Basic SEO Optimization</span>
  566. </li>
  567. <li class="benefit-item">
  568. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  569. <span class="text">Contact Form Integration</span>
  570. </li>
  571. <li class="benefit-item">
  572. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  573. <span class="text">1 Month Free Support</span>
  574. </li>
  575. <li class="benefit-item">
  576. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  577. <span class="text">SSL Certificate</span>
  578. </li>
  579. <li class="benefit-item unavailable">
  580. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  581. <span class="text">E-commerce Functionality</span>
  582. </li>
  583. <li class="benefit-item unavailable">
  584. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  585. <span class="text">Advanced Analytics</span>
  586. </li>
  587. <li class="benefit-item unavailable">
  588. <div class="circle-x-svg">
  589. <svg viewBox="0 0 24 24" width="18" height="18">
  590. <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
  591. <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
  592. <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
  593. </svg>
  594. </div>
  595. <span class="text">Priority Support</span>
  596. </li>
  597. </ul>
  598. </div>
  599. </div>
  600. <div class="plants"
  601. data-aos="fade-right"
  602. data-aos-delay="150">
  603. <div class="plant-header text-center mb-6">
  604. <h2 class="mb-0">Enterprise</h2>
  605. <p>For large-scale businesses</p>
  606. </div>
  607. <div class="price d-flex-center">
  608. <span class="price-main">$77 <span class="price-discount">$100</span></span>
  609. </div>
  610. <div class="d-flex-center">
  611. <a href="javascript:void(0)" class="btn btn-primary">Buy Enterprise Plan</a>
  612. </div>
  613. <div class="benefits">
  614. <div class="line"></div>
  615. <ul class="benefits-list">
  616. <li class="benefit-item">
  617. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  618. <span class="text">Up to 5 Pages Website</span>
  619. </li>
  620. <li class="benefit-item">
  621. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  622. <span class="text">Mobile Responsive Design</span>
  623. </li>
  624. <li class="benefit-item">
  625. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  626. <span class="text">Basic SEO Optimization</span>
  627. </li>
  628. <li class="benefit-item">
  629. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  630. <span class="text">Contact Form Integration</span>
  631. </li>
  632. <li class="benefit-item">
  633. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  634. <span class="text">1 Month Free Support</span>
  635. </li>
  636. <li class="benefit-item">
  637. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  638. <span class="text">SSL Certificate</span>
  639. </li>
  640. <li class="benefit-item unavailable">
  641. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  642. <span class="text">E-commerce Functionality</span>
  643. </li>
  644. <li class="benefit-item unavailable">
  645. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  646. <span class="text">Advanced Analytics</span>
  647. </li>
  648. <li class="benefit-item unavailable">
  649. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  650. <span class="text">Priority Support</span>
  651. </li>
  652. </ul>
  653. </div>
  654. </div>
  655. </div>
  656. </section>
  657. </div>
  658. </div> -->
  659. <!-- Testimonials section -->
  660. <!-- Main 4 -->
  661. <div class="main pt-10 pb-8">
  662. <!-- 标题区域 -->
  663. <div class="d-flex-baseline-between pb-5 carousel-title">
  664. <h2 style="font-size: 48px;">产品中心</h2>
  665. </div>
  666. <!-- 轮播核心容器 -->
  667. <div class="carousel-container">
  668. <div class="carousel-cards">
  669. <!-- 卡片1:PCB智造 -->
  670. <div class="carousel-card active">
  671. <div class="card-content">
  672. <h3>巡检机器人</h3>
  673. <p>AI 智能巡检机器人,智能预警,实现全域安全监测与无人化巡检。</p>
  674. <a href="#" class="card-btn">更多 →</a>
  675. </div>
  676. <div class="card-image" style="background-image: url('assets/images/lbimages/产品01.png');">
  677. </div>
  678. </div>
  679. <!-- 卡片2:FPC智造能力 -->
  680. <div class="carousel-card next">
  681. <div class="card-content">
  682. <h3>智能仓储机器人</h3>
  683. <p>半导体实验室 AI 智能化解决方案,实现全流程智能物流与无人化转运。</p>
  684. <a href="#" class="card-btn">更多 →</a>
  685. </div>
  686. <div class="card-image" style="background-image: url('assets/images/lbimages/产品02.png');">
  687. </div>
  688. </div>
  689. <!-- 卡片3:SMT贴片加工 -->
  690. <div class="carousel-card">
  691. <div class="card-content">
  692. <h3>AI机器人灵巧手</h3>
  693. <p>仿生灵巧手,多自由度精准操控,柔性自适应抓取,赋能精密装配与智能作业</p>
  694. <a href="#" class="card-btn">更多 →</a>
  695. </div>
  696. <div class="card-image" style="background-image: url('assets/images/lbimages/产品03.png');">
  697. </div>
  698. </div>
  699. </div>
  700. <!-- 控制箭头 -->
  701. <button class="carousel-arrow arrow-prev">&lt;</button>
  702. <button class="carousel-arrow arrow-next">&gt;</button>
  703. </div>
  704. </div>
  705. </div>
  706. <!-- <div class="container main-content">
  707. <section class="blog no-blog-sidebar">
  708. <div class="d-flex-baseline-between pb-5"
  709. data-aos="fade-down"
  710. data-aos-duration="600"
  711. data-aos-delay="0">
  712. <h2>产品中心</h2>
  713. </div>
  714. <div class="blog-grid blog-grid-col3">
  715. <article class="blog-card"
  716. data-aos="fade-up"
  717. data-aos-delay="0">
  718. <div class="blog-image">
  719. <img class="image" src="assets/images/lbimages/产品01.png" alt="The Future of Web Development">
  720. </div>
  721. <div class="blog-content">
  722. <h3 class="blog-title">巡检机器人
  723. </h3>
  724. <p class="blog-excerpt">
  725. AI 智能巡检机器人,智能预警,实现全域安全监测与无人化巡检
  726. </p>
  727. <div class="blog-footer">
  728. <a href="article.html" class="read-more">
  729. 更多
  730. <svg><use xlink:href="#arrow-right"></use></svg>
  731. </a>
  732. </div>
  733. </div>
  734. <a class="overlay-link" href="article.html"></a>
  735. </article>
  736. <article class="blog-card"
  737. data-aos="fade-up"
  738. data-aos-delay="0">
  739. <div class="blog-image">
  740. <img class="image" src="assets/images/lbimages/产品02.png" alt="The Future of Web Development">
  741. </div>
  742. <div class="blog-content">
  743. <h3 class="blog-title">智能仓储机器人
  744. </h3>
  745. <p class="blog-excerpt">
  746. 半导体实验室 AI 智能化解决方案,实现全流程智能物流与无人化转运
  747. </p>
  748. <div class="blog-footer">
  749. <a href="article.html" class="read-more">
  750. 更多
  751. <svg><use xlink:href="#arrow-right"></use></svg>
  752. </a>
  753. </div>
  754. </div>
  755. <a class="overlay-link" href="article.html"></a>
  756. </article>
  757. <article class="blog-card"
  758. data-aos="fade-up"
  759. data-aos-delay="0">
  760. <div class="blog-image">
  761. <img class="image" src="assets/images/lbimages/产品03.png" alt="The Future of Web Development">
  762. </div>
  763. <div class="blog-content">
  764. <h3 class="blog-title">AI机器人灵巧手
  765. </h3>
  766. <p class="blog-excerpt">
  767. 仿生灵巧手,多自由度精准操控,柔性自适应抓取,赋能精密装配与智能作业
  768. </p>
  769. <div class="blog-footer">
  770. <a href="article.html" class="read-more">
  771. 更多
  772. <svg><use xlink:href="#arrow-right"></use></svg>
  773. </a>
  774. </div>
  775. </div>
  776. <a class="overlay-link" href="article.html"></a>
  777. </article>
  778. </div>
  779. </section>
  780. </div> -->
  781. </div>
  782. <!-- Main 5 -->
  783. <div class="explore ts-cont1 pr section fp-section fp-table active fp-completely" data-fp-styles="null"
  784. data-anchor="page5" style="height: 919px;position: relative;">
  785. <div class="a4_v1">
  786. <div class="container">
  787. <div class="title ta">
  788. <p style="font-weight: bold;">应用案例</p>
  789. <p>Application Case</p>
  790. </div>
  791. </div>
  792. </div>
  793. <div class="maggst">
  794. <div class="a4_v2">
  795. <ul class="a4_b2 flex2">
  796. <li class="flex-z">
  797. <u><img src="./assets/images/lbimages/案例01.png" alt=""> </u>
  798. <div class="sdta">
  799. <a href="javascript:void(0)" rel="nofollow"><img
  800. src="./assets/images/ts/41f7e42d83058cf5b3dd98e28cfc2b58.svg" alt=""></a>
  801. <a href="javascript:void(0)">3C电子行业</a>
  802. <a href="javascript:void(0)" rel="nofollow" class="flex-z"><i
  803. class="iconfont icon--_jiantou"></i></a>
  804. </div>
  805. </li>
  806. <li class="flex-z">
  807. <u><img src="./assets/images/lbimages/案例02.png" alt=""> </u>
  808. <div class="sdta">
  809. <a href="javascript:void(0)" rel="nofollow"><img
  810. src="./assets/images/ts/154ed2802011e8bef0a24cbd5c6b0e61.svg" alt=""></a>
  811. <a href="javascript:void(0)">半导体行业</a>
  812. <a href="javascript:void(0)" rel="nofollow" class="flex-z"><i
  813. class="iconfont icon--_jiantou"></i></a>
  814. </div>
  815. </li>
  816. <li class="flex-z">
  817. <u><img src="./assets/images/lbimages/案例03.png" alt=""> </u>
  818. <div class="sdta">
  819. <a href="javascript:void(0)" rel="nofollow"><img
  820. src="./assets/images/ts/bd5043062779aa136a99b8e1d15f4f0a.svg" alt=""></a>
  821. <a href="javascript:void(0)">政企行业</a>
  822. <a href="javascript:void(0)" rel="nofollow" class="flex-z"><i
  823. class="iconfont icon--_jiantou"></i></a>
  824. </div>
  825. </li>
  826. <li class="flex-z">
  827. <u><img src="./assets/images/lbimages/案例04.png" alt=""> </u>
  828. <div class="sdta">
  829. <a href="javascript:void(0)" rel="nofollow"><img
  830. src="./assets/images/ts/bd5043062779aa136a99b8e1d15f4f0a.svg" alt=""></a>
  831. <a href="javascript:void(0)">生物医药行业</a>
  832. <a href="javascript:void(0)" rel="nofollow" class="flex-z"><i
  833. class="iconfont icon--_jiantou"></i></a>
  834. </div>
  835. </li>
  836. </ul>
  837. </div>
  838. </div>
  839. </div>
  840. <!-- Client company section -->
  841. <section class="client-companie pt-12">
  842. <div class="text-center mt-3 mb-4" data-aos="fade-up" data-aos-duration="600">
  843. <h2 class="text-white">荣誉客户</h2>
  844. </div>
  845. <div class="carousel-db" id="carousel">
  846. <div class="carousel-track-db" id="track">
  847. <!-- 基础6张图 -->
  848. <div class="carousel-item-db"><img src="assets/images/lbimages/客户1.png" alt="图1"></div>
  849. <div class="carousel-item-db"><img src="assets/images/lbimages/客户2.png" alt="图2"></div>
  850. <div class="carousel-item-db"><img src="assets/images/lbimages/客户3.png" alt="图3"></div>
  851. <div class="carousel-item-db"><img src="assets/images/lbimages/客户4.png" alt="图4"></div>
  852. <!-- 复制一遍,实现无缝循环 -->
  853. <div class="carousel-item-db"><img src="assets/images/lbimages/客户1.png" alt="图1"></div>
  854. <div class="carousel-item-db"><img src="assets/images/lbimages/客户2.png" alt="图2"></div>
  855. <div class="carousel-item-db"><img src="assets/images/lbimages/客户3.png" alt="图3"></div>
  856. <div class="carousel-item-db"><img src="assets/images/lbimages/客户4.png" alt="图4"></div>
  857. </div>
  858. </div>
  859. <!-- <div class="customers-carousel2 universal-slider">
  860. <div class="client-company">
  861. <img class="image" src="assets/images/lbimages/bdtkh.png" alt="Company 01">
  862. </div>
  863. <div class="client-company">
  864. <img class="image" src="assets/images/lbimages/swyy.png" alt="Company 02">
  865. </div>
  866. <div class="client-company">
  867. <img class="image" src="assets/images/lbimages/zq.png" alt="Company 04">
  868. </div>
  869. <div class="client-company">
  870. <img class="image" src="assets/images/lbimages/3c.png" alt="Company 04">
  871. </div>
  872. <div class="client-company">
  873. <img class="image" src="assets/images/lbimages/qcwtbdt.png" alt="Company 04">
  874. </div>
  875. <div class="client-company">
  876. <img class="image" src="assets/images/lbimages/jdqt.png" alt="Company 04">
  877. </div>
  878. </div> -->
  879. </section>
  880. <!-- Footer -->
  881. <footer class="footer pt-5 pb-5">
  882. <div class="footer-main">
  883. <div class="container">
  884. <div class="footer-content">
  885. <!-- Company Info -->
  886. <div class="footer-section footer-about" data-aos="fade-up" data-aos-delay="100">
  887. <div class="footer-logo">
  888. <img class="image" src="assets/images/lmdlogo/lmd2.png" alt="ITAgency Logo">
  889. </div>
  890. <!--<p class="footer-description">
  891. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;苏州立妙达智能科技有限公司由海外高层次归国人才组建,专注于AI+机器人技术的研发应用。公司由苏州立妙达、苏州艾斯达克、厦门优小二、温州铂飞自动化等组成,致力于提供AI for Science无人实验室、半导体及电子制造智慧物流等综合解决方案。公司产品线涵盖实验室机器人、晶圆机器人、搬运机器人等多种自动化设备。
  892. </p>-->
  893. <!-- <div class="footer-social">
  894. <span class="social-label">Follow Us</span>
  895. <div class="social-links">
  896. <a href="javascript:void(0)" class="social-link icon-transition"
  897. data-aos="zoom-in"
  898. data-aos-delay="200">
  899. <svg><use xlink:href="#twitter-x"></use></svg>
  900. </a>
  901. <a href="javascript:void(0)" class="social-link icon-transition"
  902. data-aos="zoom-in"
  903. data-aos-delay="250">
  904. <svg><use xlink:href="#facebook"></use></svg>
  905. </a>
  906. <a href="javascript:void(0)" class="social-link icon-transition"
  907. data-aos="zoom-in"
  908. data-aos-delay="300">
  909. <svg><use xlink:href="#linkedin"></use></svg>
  910. </a>
  911. <a href="javascript:void(0)" class="social-link icon-transition"
  912. data-aos="zoom-in"
  913. data-aos-delay="350">
  914. <svg><use xlink:href="#instagram"></use></svg>
  915. </a>
  916. </div>
  917. </div> -->
  918. </div>
  919. <!-- Navigation Links -->
  920. <div class="footer-section footer-links" data-aos="fade-up" data-aos-delay="200">
  921. <h4 class="footer-title">关于我们</h4>
  922. <ul class="footer-menu">
  923. <li><a href="javascript:void(0)" class="footer-link">公司介绍</a></li>
  924. <li><a href="javascript:void(0)" class="footer-link">发展历程</a></li>
  925. <li><a href="javascript:void(0)" class="footer-link">企业荣誉</a></li>
  926. <li><a href="javascript:void(0)" class="footer-link">合作伙伴</a></li>
  927. </ul>
  928. </div>
  929. <!-- Services -->
  930. <div class="footer-section footer-services" data-aos="fade-up" data-aos-delay="300">
  931. <h4 class="footer-title">产品中心</h4>
  932. <ul class="footer-menu">
  933. <li><a href="javascript:void(0)" class="footer-link">智能仓储机器人</a></li>
  934. <li><a href="javascript:void(0)" class="footer-link">巡检机器人</a></li>
  935. <li><a href="javascript:void(0)" class="footer-link">AI机器人及灵巧手</a></li>
  936. </ul>
  937. </div>
  938. <div class="footer-section footer-services" data-aos="fade-up" data-aos-delay="300">
  939. <h4 class="footer-title">解决方案</h4>
  940. <ul class="footer-menu">
  941. <li><a href="javascript:void(0)" class="footer-link">半导体及SMT行业</a></li>
  942. <li><a href="javascript:void(0)" class="footer-link">政企及服务行业</a></li>
  943. <li><a href="javascript:void(0)" class="footer-link">生物医药行业</a></li>
  944. </ul>
  945. </div>
  946. <!-- Newsletter -->
  947. <div class="footer-section footer-newsletter" data-aos="fade-up" data-aos-delay="500">
  948. <h4 class="footer-title">联系我们</h4>
  949. <p class="newsletter-description">
  950. 联系电话:18100697870
  951. </p>
  952. <p class="newsletter-description">
  953. 地址:苏州市相城区南天成路30号1幢非凡城市中心(东塔楼)
  954. </p>
  955. <!-- Copyright -->
  956. <div class="footer-copyright" data-aos="fade-up" data-aos-delay="500">
  957. </div>
  958. <div style="text-align:center; padding:10px 0; font-size:14px;">
  959. <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
  960. 苏ICP备2022032704号
  961. </a>
  962. © 2026
  963. </div>
  964. </div>
  965. </div>
  966. </div>
  967. </div>
  968. </footer>
  969. <!-- Scroll to Top Button -->
  970. <button class="scroll-to-top" id="scrollToTop" aria-label="Scroll to top">
  971. <svg viewBox="0 0 24 24">
  972. <path d="M7 14l5-5 5 5z" />
  973. </svg>
  974. </button>
  975. <!-- JavaScript -->
  976. <script src="assets/lib/particles/particles.min.js"></script>
  977. <script src="assets/lib/aos/aos.js"></script>
  978. <script src="assets/lib/hover3dBgEffects/hover3d-bg-effects.js"></script>
  979. <script src="assets/lib/typed/typed.umd.js"></script>
  980. <script src="assets/js/custom-isotope.js"></script>
  981. <script src="assets/js/testimonials.js"></script>
  982. <script src="assets/js/auto-progress-bar.js"></script>
  983. <script src="assets/js/animate-counters.js"></script>
  984. <script src="assets/js/universal-slider.js"></script>
  985. <script src="assets/js/contact-form-demo.js"></script>
  986. <script src="assets/data/particles-config.js"></script>
  987. <script src="assets/data/services.js"></script>
  988. <script src="assets/js/main-01.js"></script>
  989. <script src="assets/js/lb.js"></script>
  990. <script>
  991. // 核心变量
  992. const cards = document.querySelectorAll('.carousel-card');
  993. const prevBtn = document.querySelector('.arrow-prev');
  994. const nextBtn = document.querySelector('.arrow-next');
  995. let currentIndex = 0;
  996. const totalCards = cards.length;
  997. let autoPlayTimer;
  998. // 重置所有卡片状态
  999. function resetCardStates() {
  1000. cards.forEach(card => {
  1001. card.classList.remove('active', 'prev', 'next');
  1002. });
  1003. }
  1004. // 更新卡片显示状态(无级循环核心逻辑)
  1005. function updateCarousel() {
  1006. resetCardStates();
  1007. // 计算当前/上一个/下一个索引(循环处理)
  1008. const prevIndex = (currentIndex - 1 + totalCards) % totalCards;
  1009. const nextIndex = (currentIndex + 1) % totalCards;
  1010. // 设置卡片状态:激活卡片居中,前后卡片侧露
  1011. cards[currentIndex].classList.add('active');
  1012. cards[prevIndex].classList.add('prev');
  1013. cards[nextIndex].classList.add('next');
  1014. }
  1015. // 下一张
  1016. function goToNext() {
  1017. currentIndex = (currentIndex + 1) % totalCards;
  1018. updateCarousel();
  1019. }
  1020. // 上一张
  1021. function goToPrev() {
  1022. currentIndex = (currentIndex - 1 + totalCards) % totalCards;
  1023. updateCarousel();
  1024. }
  1025. // 自动轮播
  1026. function startAutoPlay() {
  1027. autoPlayTimer = setInterval(goToNext, 2500);
  1028. }
  1029. // 暂停自动轮播
  1030. function stopAutoPlay() {
  1031. clearInterval(autoPlayTimer);
  1032. }
  1033. // 绑定事件
  1034. nextBtn.addEventListener('click', goToNext);
  1035. prevBtn.addEventListener('click', goToPrev);
  1036. // 鼠标悬停暂停轮播
  1037. const carouselContainer = document.querySelector('.carousel-container');
  1038. carouselContainer.addEventListener('mouseenter', stopAutoPlay);
  1039. carouselContainer.addEventListener('mouseleave', startAutoPlay);
  1040. // 初始化
  1041. updateCarousel();
  1042. startAutoPlay();
  1043. </script>
  1044. </body>
  1045. </html>