<!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>