<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="../imgs/PNG/LOGO1.png"> <link rel="stylesheet" href="../css/header.css"> <link rel="stylesheet" href="../css/software.css"> <title>巨象云数</title> </head> <style> html, body { margin: 0; padding: 0; box-sizing: border-box; } </style> <body> <section class="headerBox"> <section class="header"> <div class="logoBox"> <img class="logo" src="../imgs/PNG/LOGO2.png" alt="logo"> </div> <ul class="nav"> <li><a class="menu " href="../index.html">首页</a> </li> <li > <a style="color: black;text-decoration: none;" href="#">网站服务</a></li> <li><a class="menu" href="bigDataServices.html">大数据服务</a></li> <li><a class="menu" href="aboutUs.html">关于我们</a></li> <li><a href="mailto:support@betmaysg.com"> <img class="email" src="../imgs/PNG/邮件.png" alt="邮件"></a></li> </ul> </section> <div class="ABtitleBox"> <div class="ABtitle"> <h1>网站服务</h1> <p>Website Services</p> </div> <p class="content"> 巨象云数为企业提供软件外包、系统设计、开发服务并在预算范围内按质交付项目。我们能够帮助客户确定对应系统或产品的具体需求,并管理和维护其整个生命周期。 </p> </div> </section> <section class="ourServicesBox"> <div class="ourServicesTitle"> <h1>我们的服务</h1> <p>标准化产品+个性化定制服务+一站式解决方案满足各个场景的应用需求</p> </div> <div class="ourServicesContent"> <div class="left"> <img src="../imgs/软件定制服务.jpg" alt="软件开发"> <h1>软件定制服务</h1> <p>为企业提供软件外包、系统设计、开发服务、并在预算范 围内按质交付项目。我们能够帮助客户确定对应系统或产 品的具体需求,并管理和维护其整个生命周期。</p> </div> <div class="right"> <img src="../imgs/移动APP及小程序开发.jpg" alt="软件开发"> <h1>移动APP及小程序开发</h1> <p>精湛的移动应用开发团队,为您打造符合最新技术标准的 创新移动应用APP和成熟的微信开发解决方案,扩大您的 用户基底和市场覆盖。</p> </div> </div> </section> <section class="ourWorksBox"> <h1>我们的工作流程</h1> <ul> <li> <div class="left2"> <p class="title">1.调查</p> <p class="text">我们进行深入的研究,以 深入了解我们的用户和市 场。通过竞争对手分析使 自己的产品脱颖而出,并 确定您品牌的当前状态和 目标。</p> </div> <div class="right2"> <img src="../imgs/PNG/箭头.svg" alt="箭头"> </div> </li> <li> <div class="left2"> <p class="title">2.策略</p> <p class="text">制定全面的软件策略,包 括营销和品牌推广。我们 将从独特的角度创造附加 价值,并制定实现品牌价 值最大化的策略。</p> </div> <div class="right2"> <img src="../imgs/PNG/箭头.svg" alt="箭头"> </div> </li> <li> <div class="left2"> <p class="title">3.详细设计</p> <p class="text">我们在设计软件时充分考 虑用户体验。将SEO和品 牌故事编织在一起,以具 有自己特色的内容吸引用 户。</p> </div> <div class="right2"> <img src="../imgs/PNG/箭头.svg" alt="箭头"> </div> </li> <li> <div class="left2"> <p class="title">4. 设计与实施</p> <p class="text">体现软件产品个性,结合 用户实际使用体验,并使 用最新技术和方法来达到 提高用户使用数量的目的。</p> </div> <div class="right2"> <img src="../imgs/PNG/箭头.svg" alt="箭头"> </div> </li> <li class="last"> <div class="content"> <p class="title">5.运营和改进</p> <p class="text">在软件产品发布后,我们 也会倾听用户的声音,并努力提高软件的使用体验。 我们将在数据分析的基础 上不断改进,努力提高营 销效果和品牌价值。</p> </div> </li> </ul> </section> <section class="softwareProduct"> <h1>软件产品</h1> <p>每一个产品都是一份信任</p> <div class="CarouselBox"> <div class="carousel-container"> <div class="carousel-list"> <div class="carousel-item"> <img src="../imgs/Carousel/房地产.png" alt="房地产项目"> </div> <div class="carousel-item"> <img src="../imgs/Carousel/数据管理软件.png" alt="数据管理项目"> </div> <div class="carousel-item"> <img src="../imgs/Carousel/电商平台.png" alt="电商平台项目"> </div> <div class="carousel-item"> <img src="../imgs/Carousel/音乐移动端.png" alt="音乐移动端"> </div> </div> <div class="carousel-arrow carousel-arrow-left">❮</div><div class="carousel-arrow carousel-arrow-right">❯</div> </div> </div> </section> <section class="footerBox"> <div class="Flogo"> <img class="FlogoImg" src="../imgs/PNG/LOGO2.png" alt="logo"> <p>版权所有 © 2025 巨象云数</p> </div> </section> <script> const carousel = { container: document.querySelector('.carousel-container'), list: document.querySelector('.carousel-list'), items: document.querySelectorAll('.carousel-item'), prevBtn: document.querySelector('.carousel-arrow-left'), nextBtn: document.querySelector('.carousel-arrow-right'), currentIndex: 0, interval: null, init() { // 克隆第一张图片到最后 const firstClone = this.items[0].cloneNode(true); this.list.appendChild(firstClone); this.autoPlay(); this.bindEvents(); }, bindEvents() { // 绑定箭头点击事件 this.prevBtn.addEventListener('click', () => this.prev()); this.nextBtn.addEventListener('click', () => this.next()); // 鼠标悬停暂停 this.container.addEventListener('mouseenter', () => this.pause()); this.container.addEventListener('mouseleave', () => this.autoPlay()); }, next() { this.currentIndex++; this.updateSlide(); }, prev() { if (this.currentIndex === 0) { this.currentIndex = this.items.length; this.list.style.transition = 'none'; this.list.style.transform = `translateX(-${this.currentIndex * 100}%)`; // 强制重绘 this.list.offsetHeight; } this.currentIndex--; this.list.style.transition = 'transform 0.5s ease'; this.list.style.transform = `translateX(-${this.currentIndex * 100}%)`; }, updateSlide() { this.list.style.transition = 'transform 0.5s ease'; this.list.style.transform = `translateX(-${this.currentIndex * 100}%)`; // 当滑动到克隆的第一张图时 if (this.currentIndex === this.items.length) { setTimeout(() => { this.list.style.transition = 'none'; this.currentIndex = 0; this.list.style.transform = `translateX(0)`; }, 500); } }, autoPlay() { this.interval = setInterval(() => this.next(), 3000); }, pause() { clearInterval(this.interval); } }; // 初始化轮播图 document.addEventListener('DOMContentLoaded', () => { carousel.init(); }); </script> </body> </html>