jQuery淡入淡出动画异常求助：轮播切换与自动播放失效

修复方案 #

直接针对你的两个核心问题给出修改后的完整代码，附关键修改说明：

修改后的HTML（含基础样式）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<style>
  #animation {
    position: relative;
    width: 600px; /* 替换成你的图片实际宽度 */
    height: 400px; /* 替换成你的图片实际高度 */
  }
  .slide-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例，按需调整 */
  }
  .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    margin: 0 4px;
    cursor: pointer;
  }
  .dot.active {
    background: #333;
  }
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    background: rgba(0,0,0,0.3);
    transition: background 0.3s;
    user-select: none;
  }
  .next {
    right: 0;
  }
  .prev:hover, .next:hover {
    background: rgba(0,0,0,0.6);
  }
</style>

<a class="prev" id="previous">&#10094;</a>
<div id="animation">
  <img class="slide-img active" id="img1" />
  <img class="slide-img" id="img2" style="display:none;" />
  <div style="text-align:center; position: absolute; bottom: 10px; width: 100%;">
    <span class="dot" data-index="0"></span>
    <span class="dot" data-index="1"></span>
    <span class="dot" data-index="2"></span>
    <span class="dot" data-index="3"></span>
    <span class="dot" data-index="4"></span>
    <span class="dot" data-index="5"></span>
    <span class="dot" data-index="6"></span>
    <span class="dot" data-index="7"></span>
    <span class="dot" data-index="8"></span>
    <span class="dot" data-index="9"></span>
  </div>
</div>
<a class="next" id="next">&#10095;</a>

修改后的JS

var DiashowBilder = [
  "Bilder/1.jpeg", "Bilder/2.jpeg", "Bilder/3.jpeg", 
  "Bilder/4.jpeg", "Bilder/5.jpeg", "Bilder/6.jpeg", 
  "Bilder/7.jpeg", "Bilder/8.jpeg", "Bilder/9.jpeg", 
  "Bilder/10.jpeg"
];  
var currentIndex = 0;
var $img1 = jQuery("#img1");
var $img2 = jQuery("#img2");
var $dots = jQuery(".dot");

jQuery.noConflict();

jQuery(document).ready(function() {
  // 初始化第一张图和激活第一个dot
  updateSlide($img1, DiashowBilder[currentIndex]);
  $dots.eq(currentIndex).addClass("active");

  // 绑定箭头点击事件
  jQuery("#next").click(function() {
    changeSlide(1);
  });
  jQuery("#previous").click(function() {
    changeSlide(-1);
  });

  // 绑定dots点击事件
  $dots.click(function() {
    var targetIndex = parseInt(jQuery(this).data("index"));
    changeSlide(targetIndex - currentIndex);
  });

  // 自动切换
  setInterval(function() {
    changeSlide(1);
  }, 5000);
});

// 核心切换函数，处理动画、图片更新、索引和dots状态
function changeSlide(step) {
  var newIndex = currentIndex + step;
  // 处理循环边界
  if (newIndex >= DiashowBilder.length) newIndex = 0;
  if (newIndex < 0) newIndex = DiashowBilder.length - 1;

  // 获取当前显示/隐藏的图片元素
  var $currentImg = $img1.is(":visible") ? $img1 : $img2;
  var $nextImg = $img1.is(":visible") ? $img2 : $img1;

  // 更新新图片的src
  updateSlide($nextImg, DiashowBilder[newIndex]);

  // 交叉淡入淡出：当前图淡出，新图淡入
  $currentImg.fadeOut(400);
  $nextImg.fadeIn(400);

  // 更新dots激活状态
  $dots.eq(currentIndex).removeClass("active");
  $dots.eq(newIndex).addClass("active");

  // 更新当前索引
  currentIndex = newIndex;
}

// 辅助函数：更新图片src
function updateSlide($img, src) {
  $img.attr("src", src);
}

关键修改说明

1. 解决新旧图片生硬切换问题：

   • 用两张绝对定位的<img>标签层叠在容器中，切换时让当前显示的图片淡出，同时已加载好新src的隐藏图片淡入，实现平滑的交叉渐变，不会出现空白间隙

2. 解决自动切换无动画问题：

   • 把所有切换逻辑（箭头、自动、dots点击）统一到changeSlide函数，该函数自带fade动画逻辑
   • 原代码自动切换直接修改图片src，现在改为调用changeSlide(1)，触发完整动画流程

3. 修复其他潜在bug：

   • 原dots的onclick传值1-10会导致数组索引越界（数组是0-9），改用data-index存储正确索引
   • 移除了原代码中无效的change事件绑定（div元素没有change事件）
   • 统一索引管理，逻辑更清晰，避免全局变量混乱

内容的提问来源于stack exchange，提问作者alina