js实现图片纵向轮播图

以下是使用JS实现图片纵向轮播图的初级版的示例代码：

data() {
  return {
    rollList: [
      { img: '图片地址1' },
      { img: '图片地址2' },
      { img: '图片地址3' }
    ],
    height: 0,
    iSif: false
  }
},
methods: {
  loads(res) {
    this.height = res.detail.height;
    this.iSif = true;
  }
}

这段代码中，`rollList`是一个包含图片地址的数组，表示轮播图中的图片列表。`height`是一个变量，用于存储图片的高度。`iSif`是一个布尔变量，用于控制轮播图的显示。

在`loads`方法中，通过传入的`res`参数获取图片的高度，并将其赋值给`height`变量。然后将`iSif`设置为`true`，表示轮播图已加载完成。

这段代码实现了一个简单的纵向轮播图，可以根据实际需求进行修改和扩展。

相关问题

微信小程序实现图片纵向轮播

微信小程序实现图片纵向轮播，通常可以利用小程序提供的`scroll-view`组件结合CSS样式来完成。下面是一个简单的步骤：

1. **引入组件**：
首先，在页面的WXML文件中导入需要的`view`、`image`和`scroll-view`组件。

<view class="vertical-carousel">
  <scroll-view class="carousel-scroll" scroll-y="true" indicator-dots="true">
    <!-- 图片将放在这里 -->
  </scroll-view>
</view>

2. **创建图片列表**：
在`scroll-view`内添加多个`image`组件，每张图片代表一屏展示的内容。

<image src="{{item.src}}" wx:for="{{images}}" wx:key="*this"></image>

这里假设`images`数据结构存储了所有图片的URL。

3. **CSS样式**：
在对应的.wxss文件中，设置`.carousel-scroll`和`.image-item`的样式，使其适应纵向滚动。例如：

.carousel-scroll {
  height: 100%;
}

.image-item {
  width: 100%;
  flex-shrink: 0; /* 确保图片不会因内容过少而缩小 */
  display: flex;
  justify-content: center;
  align-items: center;
}

4. **JavaScript控制**：
如果需要动态切换图片，可以在data里维护当前显示的索引，并在`bindscrolltolower`事件中切换到下一张图，或者使用定时器自动轮播。

Page({
  data: {
    images: [...], // 初始化图片数组
    currentIndex: 0,
    intervalId: null
  },
  
  ...,

  bindScrollToLower: function() {
    this.nextImage();
  },

  nextImage: function() {
    this.setData({
      currentIndex: (this.data.currentIndex + 1) % this.data.images.length
    });
    clearInterval(this.intervalId); // 清除上一次定时器
    this.intervalId = setInterval(this.nextImage.bind(this), 3000); // 设置新的轮播间隔
  }
})

用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);
});