jQuery 轮播图 控制每个图片的停留时间

可以使用 jQuery 的定时器来控制每个图片的停留时间。

例如，下面的代码实现了一个轮播图，每个图片停留时间为 3 秒：

<div class="slider">
  <img src="img1.jpg">
  <img src="img2.jpg">
  <img src="img3.jpg">
</div>

<script>
$(function() {
  var $slider = $('.slider');
  var $slides = $slider.find('img');
  var currentSlide = 0;

  function nextSlide() {
    $slides.eq(currentSlide).fadeOut();
    currentSlide = (currentSlide + 1) % $slides.length;
    $slides.eq(currentSlide).fadeIn();
  }

  setInterval(nextSlide, 3000);
});
</script>

在上面的代码中，`setInterval(nextSlide, 3000)` 表示每隔 3 秒调用一次 `nextSlide` 函数，也就是自动轮播图片。在 `nextSlide` 函数中，根据 `currentSlide` 的值来控制当前图片的淡出和下一张图片的淡入。

相关问题

jquery 轮播图 函数控制每个图片停留显示时间 完整代码

以下是一个基本的jquery轮播图，可以通过修改setInterval函数的参数来控制每个图片停留显示的时间。

HTML代码：

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

CSS代码：

.slider {
  position: relative;
  overflow: hidden;
}
.slider-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  transition: transform 0.5s ease;
}
.slider-wrapper img {
  display: inline-block;
  width: 33.33%;
}

jQuery代码：

$(function() {
  var slideWidth = $('.slider-wrapper img').width();
  var currentSlide = 0;
  var sliderInterval = setInterval(nextSlide, 3000);

  function nextSlide() {
    currentSlide++;
    if (currentSlide >= $('.slider-wrapper img').length) {
      currentSlide = 0;
    }
    $('.slider-wrapper').css('transform', 'translateX(-' + currentSlide * slideWidth + 'px)');
  }

  $('.slider').hover(function() {
    clearInterval(sliderInterval);
  }, function() {
    sliderInterval = setInterval(nextSlide, 3000);
  });
});

在上面的代码中，我们使用了setInterval函数来实现轮播，每个图片停留的时间为3秒。我们还添加了hover事件，当鼠标放在轮播图上时停止轮播，当鼠标移开时继续轮播。

jQuery 图片轮播图 单独控制每张图显示停留时间

你可以使用 jQuery 的 setTimeout 函数来实现单独控制每张图显示停留时间的效果。以下是一个示例代码：

$(document).ready(function() {
  // 定义每张图片的停留时间
  var slideDuration = [3000, 4000, 5000];

  // 初始化轮播图
  var currentSlide = 0;
  showSlide(currentSlide);

  // 自动切换下一张图片
  var timer = setInterval(function() {
    currentSlide++;
    if (currentSlide >= slideDuration.length) {
      currentSlide = 0;
    }
    showSlide(currentSlide);
  }, slideDuration[currentSlide]);

  // 点击左右箭头切换图片
  $('.prev').click(function() {
    currentSlide--;
    if (currentSlide < 0) {
      currentSlide = slideDuration.length - 1;
    }
    showSlide(currentSlide);
  });
  
  $('.next').click(function() {
    currentSlide++;
    if (currentSlide >= slideDuration.length) {
      currentSlide = 0;
    }
    showSlide(currentSlide);
  });

  // 显示指定的图片
  function showSlide(index) {
    $('.slide').hide();
    $('.slide').eq(index).fadeIn(500);
    clearInterval(timer);
    timer = setInterval(function() {
      currentSlide++;
      if (currentSlide >= slideDuration.length) {
        currentSlide = 0;
      }
      showSlide(currentSlide);
    }, slideDuration[currentSlide]);
  }
});

这个代码中，我们定义了一个数组 `slideDuration`，用于存储每张图片的停留时间。在初始化轮播图时，我们调用了 `showSlide` 函数，显示第一张图片。然后使用 `setInterval` 函数来自动切换下一张图片，时间间隔为当前图片的停留时间。

在点击左右箭头切换图片时，我们通过修改 `currentSlide` 变量来指定要显示的图片，并调用 `showSlide` 函数来显示它。

在 `showSlide` 函数中，我们先隐藏所有图片，然后用 `fadeIn` 函数显示指定的图片。接着使用 `clearInterval` 函数清除自动切换下一张图片的定时器，重新设置定时器，时间间隔为当前图片的停留时间。这样就实现了单独控制每张图显示停留时间的效果。