js仿小米官网图片轮播特效

下面是JS仿小米官网图片轮播特效的完整攻略。

1. 实现思路

轮播图可以利用 JavaScript 配合 CSS 动画来方式实现。我们可以利用 JavaScript 的定时器 setInterval 来不断地改变图片的位置，同时利用 CSS 的动画为图片添加渐变效果。

具体实现步骤如下：

• 在 HTML 中添加轮播图的容器，包含各个图片和指示器。
• 在 CSS 中为轮播图容器和图片添加样式，包括指定容器的宽高、定位方式等，以及实现图片的渐变效果。
• 在 JavaScript 中获取轮播图容器和图片元素，计算每张图片的宽度、总数量等，然后使用 setInterval 实现轮播逻辑。
• 为轮播图容器添加鼠标移入移出监听事件，当鼠标移入容器时停止轮播，移出时重新开始。

2. 代码实现

下面是使用纯 JavaScript 实现的一些示例代码：

2.1 HTML 代码

<div class="carousel-container">
  <ul class="carousel-list">
    <li>
      <img src="img1.jpg" alt="img1">
    </li>
    <li>
      <img src="img2.jpg" alt="img2">
    </li>
    <li>
      <img src="img3.jpg" alt="img3">
    </li>
    <li>
      <img src="img4.jpg" alt="img4">
    </li>
  </ul>
  <div class="carousel-nav">
    <span class="nav-dot active"></span>
    <span class="nav-dot"></span>
    <span class="nav-dot"></span>
    <span class="nav-dot"></span>
  </div>
</div>

2.2 CSS 代码

.carousel-container {
  position: relative;
  width: 640px;
  height: 360px;
  overflow: hidden;
}

.carousel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 2560px;
  animation: carousel 15s infinite;
}

.carousel-list li {
  float: left;
  width: 640px;
  height: 360px;
}

.carousel-list li img {
  display: block;
  width: 100%;
  height: 100%;
}

.carousel-nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.nav-dot {
  display: inline-block;
  margin: 0 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #bbb;
  cursor: pointer;
}

.active {
  background-color: #f60;
}

@keyframes carousel {
  0% {
    left: 0;
  }
  20% {
    left: 0;
  }
  25% {
    left: -640px;
  }
  45% {
    left: -640px;
  }
  50% {
    left: -1280px;
  }
  70% {
    left: -1280px;
  }
  75% {
    left: -1920px;
  }
  95% {
    left: -1920px;
  }
  100% {
    left: -2560px;
  }
}

2.3 JavaScript 代码

// 获取轮播图的元素
var carouselContainer = document.querySelector('.carousel-container');
var carouselList = document.querySelector('.carousel-list');
var carouselNav = document.querySelector('.carousel-nav');
var dots = document.querySelectorAll('.nav-dot');

// 计算每张图片的宽度和总数量
var picWidth = carouselContainer.offsetWidth;
var picNum = carouselList.children.length;

// 定义当前图片的索引
var currentIndex = 0;

// 通过设置 left 值实现轮播效果
function carousel() {
  currentIndex++;
  if (currentIndex >= picNum) {
    currentIndex = 0;
  }
  carouselList.style.left = -currentIndex * picWidth + 'px';
  setActiveDot(currentIndex);
}

// 设置当前激活的小圆点
function setActiveDot(index) {
  for (var i = 0; i < dots.length; i++) {
    dots[i].classList.remove('active');
  }
  dots[index].classList.add('active');
}

// 切换到指定的图片
function goTo(index) {
  currentIndex = index;
  carouselList.style.left = -currentIndex * picWidth + 'px';
  setActiveDot(currentIndex);
}

// 监听鼠标移入移出事件
carouselContainer.addEventListener('mouseover', function() {
  clearInterval(timer);
});

carouselContainer.addEventListener('mouseout', function() {
  timer = setInterval(carousel, 3000);
});

// 监听小圆点点击事件
carouselNav.addEventListener('click', function(event) {
  if (event.target.classList.contains('nav-dot')) {
    var index = Array.prototype.indexOf.call(dots, event.target);
    goTo(index);
  }
});

// 初始化
var timer = setInterval(carousel, 3000);

3. 注意事项

1. 轮播图容器和图片的宽高必须设定为固定值，否则无法实现轮播效果。
2. 轮播图容器需要设置 overflow: hidden; 才能实现图片的切换效果。
3. 鼠标移入轮播图容器时，必须停止定时器，否则会产生冲突。
4. 轮播图需要有指示器来提示当前图片的位置，用户可以点击指示器快速切换图片。
5. 在移动设备上需要注意触摸事件的使用，可以使用 touchstart 和 touchend 实现手指滑动切换图片的效果。