信发软件之-轮播——未来之窗行业应用跨平台架构

轮播作用

1. 吸引注意力：通过动态切换的图片，能够在第一时间吸引观众的目光，增加页面的视觉冲击力，使其更容易关注到展示的内容。

2. 突出重点信息：可以将最重要、最核心的产品、服务或关键信息以轮播的形式呈现，确保观众能够注意到。

3. 节省空间：在有限的页面空间内展示多个相关的图片或内容，避免页面过于繁杂。

4. 引导用户行为：例如通过轮播图片中的引导按钮或提示，引导用户点击进入详细页面、进行购买或了解更多。

5. 展示多样性：能够展示一系列不同的产品、场景、案例等，让用户更全面地了解相关内容。

6. 营造氛围：根据图片的主题和风格，为页面营造特定的氛围，增强用户的情感共鸣和对品牌的印象。

7. 实时更新：方便及时更新展示的图片内容，以适应不同的营销活动、季节、节日等需求。

8. 增加互动性：吸引用户主动停留并等待图片切换，提高用户在页面上的停留时间。

 轮播代码

 function startSlider(轮播主体, delay) {
      const slider = document.querySelector(`.${轮播主体}`);
      const slide项目 = document.querySelectorAll(`.${轮播主体} .slide_item`);
      let currentSlide = 0;
      let intervalId;

      function showSlide(index) {
         // console.log("开始了"+轮播主体);
        slide项目.forEach((slide, i) => {
          if (i === index) {
            slide.style.transform = 'translateX(0)';
             slide.style.transform = 'translateY(0)';
          } else {
            //slide.style.transform = 'translateX(100%)';
            //slide.style.transform = 'translateY(100%)';
            /*
             const element = document.getElementById('myElement');
   // 3D平移
   element.style.transform = 'translateZ(100px)';
   // 3D旋转
   element.style.transform = 'rotateX(30deg) rotateY(45deg) rotateZ(60deg)';
   // 3D缩放
   element.style.transform = 'scale3d(1.5, 2, 1)';
            */
           //  slide.style.transform = 'scale3d(1.5, 2, 1)';
              slide.style.transform = 'rotateX(30deg) rotateY(45deg) rotateZ(60deg)';
          }
          // console.log(slide);
          //  console.log("播放=index="+index+"i ="+i);
           
        });
      }

      function start() {
        intervalId = setInterval(() => {
          currentSlide++;
          if (currentSlide >= slide项目.length) {
            currentSlide = 0;
          }
          showSlide(currentSlide);
        }, delay);
      }

      function stop() {
        clearInterval(intervalId);
      }

      start();

      slider.addEventListener('mouseenter', stop);
      slider.addEventListener('mouseleave', () => start());

      return {
        start: start,
        stop: stop
      };
    }

    const slider1 = startSlider('slider1', 1500);