jQuery仿海尔官网全屏焦点图特效代

jQuery 仿海尔官网全屏焦点图特效代码

理解需求

要实现仿海尔官网的全屏焦点图特效，我们需要考虑以下几个方面：

• 全屏展示： 焦点图需要占据整个浏览器窗口。
• 图片切换： 图片之间需要平滑过渡，可以采用淡入淡出、滑动等效果。
• 自动播放： 焦点图可以自动播放，并设置播放间隔。
• 手动控制： 用户可以通过按钮或指示点手动切换图片。
• 响应式设计： 焦点图需要适应不同屏幕尺寸。

实现步骤

1. HTML 结构

<div class="fullpage-slider">
  <div class="slide" style="background-image: url(image1.jpg);"></div>
  <div class="slide" style="background-image: url(image2.jpg);"></div>
  <div class="slid   er-controls">
    <button class="prev">上一张</button>
    <button class="next">下一张</button>
    <div class="dots"></div>
  </div>
</div>

2. CSS 样式

.fullpage-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-positio   n: center center;
  transition: opacity 0.5s ease-in-out;
}

.slide.active {
  opacity: 1;
}

/* ...其他样式，如指示点样式、按钮样式等 */

3. jQuery 代码

$(document).ready(function() {
  const $slider = $('.fullpage-slider');
  const $slides = $('.slide');
  const $dots = $('.dots');
  let currentIndex = 0;
  const slideCount = $slides.length;

  // 创建指示点
  for (let i = 0; i < slideCount; i++) {
    $dots.append('<span class="dot"></span>');
  }

  // 初始化第一个slide
  $slides.eq(currentIndex).addClass('active');
  $('.dot').eq(currentIndex).addClass('active');

  // 自动播放
  function autoplay() {
    currentIndex++;
    if (currentIndex >= slideCount) {
      currentIndex = 0;
    }
    showSlide(currentIndex);
  }

  // 显示指定slide
  function showSlide(index) {
    $slides.removeClass('active');
    $('.dot').removeClass('active');
    $slides.eq(index).addClass('active');
    $('.dot').eq(index).addClass('active');
  }

  // 上一张、下一张按钮事件
  $('.prev').click(() => {
    currentIndex--;
    if (currentIndex < 0) {
      currentIndex = slideCount - 1;
    }
    showSlide(currentIndex);
  });

  $('.next').click(() => {
    currentIndex++;
    if (currentIndex >= slideCount) {
      currentIndex = 0;
    }
    showSlide(currentIndex);
  });

  // 指示点点击事件
  $('.dot').click(function() {
    currentIndex = $(this).index();
    showSlide(currentIndex);
  });

  // 自动播放
  setInterval(autoplay, 3000);
});

核心功能

• 全屏展示： 通过设置 position: fixed 和 width: 100%, height: 100vh 实现。
• 图片切换： 使用 opacity 属性和 transition 实现淡入淡出效果。
• 自动播放： 使用 setInterval 函数实现自动切换。
• 手动控制： 通过按钮和指示点控制图片切换。
• 响应式设计： 通过 CSS 的百分比和弹性布局实现。

扩展功能

• 滑动切换： 使用 CSS3 的 transform 属性实现滑动效果。
• 淡入淡出效果： 可以使用不同的 transition 属性来调整淡入淡出的速度和方式。
• 自定义动画： 使用 CSS3 的 animation 属性或 JavaScript 动画库实现更复杂的动画效果。
• 触摸滑动： 针对移动端，可以使用 touch 事件实现触摸滑动切换。

注意事项

• 图片优化： 为了提高页面加载速度，可以对图片进行压缩和懒加载。
• 浏览器兼容性： 不同浏览器对 CSS3 和 JavaScript 的支持程度不同，需要进行兼容性测试。
• 用户体验： 调整动画速度和效果，确保用户体验流畅。

总结

以上代码实现了基本的全屏焦点图效果，您可以根据海尔官网的具体设计要求进行调整和优化。

想了解更多关于 jQuery 实现焦点图的细节，可以参考以下关键词：

• jQuery 轮播
• jQuery 滑动
• jQuery 幻灯片
• CSS3 动画

如果您有更具体的问题，欢迎随时提出！

例如，您想实现以下哪些功能？

• 焦点图标题和描述
• 焦点图视频播放
• 焦点图响应式布局优化

我将为您提供更详细的解答。