jQuery 图片切换时间单独控制

您可以使用jQuery的setInterval函数来控制图片切换的时间。下面是一个示例代码：

$(document).ready(function(){
    var slideIndex = 0;
    showSlides();

    function showSlides() {
        var i;
        var slides = $(".mySlides");
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > slides.length) {slideIndex = 1}
        slides[slideIndex-1].style.display = "block";
        setTimeout(showSlides, 3000); // 切换时间为3秒
    }

    // 可以在此处添加其他代码，例如点击按钮切换图片等
});

在上面的示例中，我们使用了setInterval函数来实现自动切换图片。您可以通过更改setTimeout函数中的时间来控制切换时间。如果您想单独控制每张图片的切换时间，可以在showSlides函数中添加一个数组来存储每张图片的切换时间，然后在setTimeout函数中使用相应的时间。

相关问题

jQuery 轮播 图片切换单独控制时间

可以通过设置定时器来单独控制每张图片的展示时间。具体的实现方式如下：

1. 定义一个变量来记录当前显示的图片的索引值，初始值为0。

2. 使用 setInterval() 方法来设置定时器，每隔一定时间切换一次图片。

3. 在定时器中，先将当前显示的图片隐藏，然后将索引值加1，如果已经到达最后一张图片，则将索引值重置为0。

4. 最后，将下一张要显示的图片显示出来。

下面是一个示例代码：

$(function() {
  var current = 0; // 当前显示的图片的索引值
  var duration = 3000; // 图片切换的时间间隔
  
  // 定义定时器，控制图片轮播
  setInterval(function() {
    // 隐藏当前显示的图片
    $('.slider li').eq(current).fadeOut();
    // 计算下一张要显示的图片的索引值
    current = (current + 1) % $('.slider li').length;
    // 显示下一张图片
    $('.slider li').eq(current).fadeIn();
  }, duration);
});

在上面的代码中，我们使用了 jQuery 的 fadeIn() 和 fadeOut() 方法来实现图片的切换效果。具体来说，我们先通过 $('.slider li').eq(current) 获取当前显示的图片，然后调用 fadeOut() 方法将其隐藏。接着，计算下一张要显示的图片的索引值，将其显示出来。由于要循环播放图片，所以在计算索引值时需要使用取模运算符 (%)。最后，我们通过 $('.slider li').eq(current) 和 fadeIn() 方法将下一张图片显示出来。

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` 函数清除自动切换下一张图片的定时器，重新设置定时器，时间间隔为当前图片的停留时间。这样就实现了单独控制每张图显示停留时间的效果。