js如何实现滑动效果？

JS实现滑动效果可以通过以下方式实现：

1. 使用CSS3动画：可以使用CSS3的transition或者animation属性来实现滑动效果，通过JavaScript来控制CSS样式的变化。

2. 使用jQuery插件：jQuery插件库中有很多实现滑动效果的插件，例如swiper、slick等，可以直接调用插件来实现滑动效果。

3. 使用原生JavaScript：可以通过原生JavaScript来实现滑动效果，例如通过设置元素的left或者top属性值来实现滑动。

下面是一个使用原生JavaScript实现左右滑动效果的示例代码：

HTML代码：

<div class="slider">
  <ul>
    <li><img src="1.jpg"></li>
    <li><img src="2.jpg"></li>
    <li><img src="3.jpg"></li>
  </ul>
</div>

CSS代码：

.slider {
  overflow: hidden;
  width: 600px;
  height: 400px;
}
.slider ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 1800px;
  position: relative;
  left: 0;
  transition: left 0.5s ease-in-out;
}
.slider ul li {
  float: left;
  width: 600px;
  height: 400px;
}

JavaScript代码：

var slider = document.querySelector('.slider');
var ul = slider.querySelector('ul');
var li = slider.querySelectorAll('li');
var len = li.length;
var width = li[0].offsetWidth;
var currentIndex = 0;

// 点击向左箭头事件
document.querySelector('.prev').addEventListener('click', function() {
  if (currentIndex > 0) {
    currentIndex--;
    ul.style.left = -currentIndex * width + 'px';
  }
});

// 点击向右箭头事件
document.querySelector('.next').addEventListener('click', function() {
  if (currentIndex < len - 1) {
    currentIndex++;
    ul.style.left = -currentIndex * width + 'px';
  }
});

在上面的代码中，我们通过设置ul元素的left属性值来实现滑动效果，然后通过JavaScript来控制left属性值的变化实现左右滑动。