JavaScript实现移动端带transition动画的轮播效果

Javascript实现移动端带transition动画的轮播效果的攻略可以分为以下几个步骤：

1. HTML布局

首先，需要在HTML中编写轮播图的布局，通常是一个<ul>元素，包含多个<li>元素，每个<li>元素内部包含图片或者其他需要轮播的内容，如下所示：

<div class="carousel-container">
  <ul class="carousel">
    <li><img src="img1.jpg"></li>
    <li><img src="img2.jpg"></li>
    <li><img src="img3.jpg"></li>
  </ul>
</div>

其中，.carousel-container是包含.carousel轮播图的容器，可以设置宽度和高度，.carousel是轮播图的容器，可以设置为position：relative，用于内部元素的绝对定位。

2. CSS样式

接下来，需要设置轮播图容器和轮播元素的样式，包括宽度、高度、边框、内边距、外边距等样式。同时为了实现轮播动画效果，还需要使用CSS3的transition属性来设置动画过渡效果：

.carousel-container {
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.carousel {
  width: 300%;
  position: relative;
  left: 0;
  transition: left 0.5s ease;
}
.carousel li {
  float: left;
  width: 33.33%;
  height: 200px;
  text-align: center;
  box-sizing: border-box;
}

在上面的代码中，.carousel的宽度被设置成了300%，并且使用position属性将其定位到左侧，而left属性为0。同时，.carousel元素的transition属性被设置成了left 0.5s ease，表示在左右滑动时，过渡时间为0.5秒，过渡的效果为ease。

3. JavaScript实现

最后，需要使用JavaScript实现轮播图的功能。我们可以先编写一个函数，用于切换轮播图片的位置。切换时，通过修改.carousel元素的left属性来实现滑动的效果：

function slideTo(index) {
  var left = index * -100 / 3 + '%';
  document.querySelector('.carousel').style.left = left;
}

在上面的代码中，使用了querySelector方法来获取.carousel元素，并将其样式的left属性设置为根据当前图片计算出的值。

接着，可以编写另一个函数，用于自动轮播。通过设置一个计时器，在一定时间间隔之后调用slideTo函数来实现自动轮播：

function autoSlide() {
  var index = 0;
  setInterval(function() {
    index = (index + 1) % 3;
    slideTo(index);
  }, 3000);
}

在上面的代码中，将index的初值设置为0，然后每隔3秒将index加1并对3取余，然后调用slideTo函数，实现自动轮播的效果。

示例说明

示例一： 基本轮播效果

下面是一个基本的轮播效果示例：

<!-- HTML -->
<div class="carousel-container">
  <ul class="carousel">
    <li><img src="img1.jpg"></li>
    <li><img src="img2.jpg"></li>
    <li><img src="img3.jpg"></li>
  </ul>
</div>

/* CSS */
.carousel-container {
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.carousel {
  width: 300%;
  position: relative;
  left: 0;
  transition: left 0.5s ease;
}
.carousel li {
  float: left;
  width: 33.33%;
  height: 200px;
  text-align: center;
  box-sizing: border-box;
}

// JavaScript
function slideTo(index) {
  var left = index * -100 / 3 + '%';
  document.querySelector('.carousel').style.left = left;
}
function autoSlide() {
  var index = 0;
  setInterval(function() {
    index = (index + 1) % 3;
    slideTo(index);
  }, 3000);
}

autoSlide();

示例二： 增加按钮控制

下面是一个增加左右按钮控制的轮播效果示例：

<!-- HTML -->
<div class="carousel-container">
  <ul class="carousel">
    <li><img src="img1.jpg"></li>
    <li><img src="img2.jpg"></li>
    <li><img src="img3.jpg"></li>
  </ul>
  <button class="prev"></button>
  <button class="next"></button>
</div>

/* CSS */
.carousel-container {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}
.carousel {
  width: 300%;
  position: absolute;
  top: 0;
  left: 0;
  transition: left 0.5s ease;
}
.carousel li {
  float: left;
  width: 33.33%;
  height: 200px;
  text-align: center;
  box-sizing: border-box;
}
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background-color: #ccc;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
.prev {
  left: 10px;
}
.next {
  right: 10px;
}

// JavaScript
function slideTo(index) {
  var left = index * -100 / 3 + '%';
  document.querySelector('.carousel').style.left = left;
}
function autoSlide() {
  var index = 0;
  setInterval(function() {
    index = (index + 1) % 3;
    slideTo(index);
  }, 3000);
}
var prevButton = document.querySelector('.prev');
var nextButton = document.querySelector('.next');
prevButton.addEventListener('click', function() {
  var currentLeft = parseFloat(document.querySelector('.carousel').style.left);
  var targetLeft = currentLeft + 33.33;
  if (currentLeft === 0) {
    targetLeft = -66.66;
  }
  slideTo(-targetLeft / (100 / 3));
});
nextButton.addEventListener('click', function() {
  var currentLeft = parseFloat(document.querySelector('.carousel').style.left);
  var targetLeft = currentLeft - 33.33;
  if (currentLeft === -66.66) {
    targetLeft = 0;
  }
  slideTo(-targetLeft / (100 / 3));
});

autoSlide();

在上面的代码中，增加了两个按钮，分别绑定了左右滑动的事件。每次点击时，计算出目标的left值，然后调用slideTo函数实现滑动效果。同时修正了因为绝对定位造成的一些问题。