用js实现要求一：jquery技术实现横向轮播图。要求二：jquery技术实现纵向轮播图

以下是用jQuery实现横向轮播图和纵向轮播图的代码：

横向轮播图：

<div class="slider">
  <div class="slider-wrapper">
    <img src="image1.jpg" alt="">
    <img src="image2.jpg" alt="">
    <img src="image3.jpg" alt="">
  </div>
</div>

.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
}
.slider-wrapper {
  width: 1500px;
  height: 300px;
  position: relative;
  left: 0;
  transition: left 1s ease-in-out;
}
.slider-wrapper img {
  float: left;
  width: 500px;
  height: 300px;
}

$(document).ready(function() {
  var sliderWrapper = $('.slider-wrapper');
  var images = sliderWrapper.find('img');
  var imageWidth = images.width();
  var imageCount = images.length;
  var totalWidth = imageWidth * imageCount;
  sliderWrapper.width(totalWidth);
  var currentImage = 0;
  setInterval(function() {
    currentImage++;
    if (currentImage === imageCount) {
      currentImage = 0;
      sliderWrapper.css('left', 0);
    }
    sliderWrapper.animate({
      left: -currentImage * imageWidth
    }, 1000);
  }, 3000);
});

纵向轮播图：

<div class="slider">
  <div class="slider-wrapper">
    <img src="image1.jpg" alt="">
    <img src="image2.jpg" alt="">
    <img src="image3.jpg" alt="">
  </div>
</div>

.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
}
.slider-wrapper {
  width: 500px;
  height: 900px;
  position: relative;
  top: 0;
  transition: top 1s ease-in-out;
}
.slider-wrapper img {
  width: 500px;
  height: 300px;
}

$(document).ready(function() {
  var sliderWrapper = $('.slider-wrapper');
  var images = sliderWrapper.find('img');
  var imageHeight = images.height();
  var imageCount = images.length;
  var totalHeight = imageHeight * imageCount;
  sliderWrapper.height(totalHeight);
  var currentImage = 0;
  setInterval(function() {
    currentImage++;
    if (currentImage === imageCount) {
      currentImage = 0;
      sliderWrapper.css('top', 0);
    }
    sliderWrapper.animate({
      top: -currentImage * imageHeight
    }, 1000);
  }, 3000);
});