如何为一个非常简单的 javascript 幻灯片添加平滑过渡答案

【问题标题】：How to add smooth transitions to a very simple javascript slideshow如何为一个非常简单的 javascript 幻灯片添加平滑过渡
【发布时间】：2022-04-19 10:21:19
【问题描述】：

我有以下 JavaScript 来制作幻灯片：

window.addEventListener('load', main, false);

var number = 1;
var interval;

function main() {
    interval = setInterval(changeDia, 3000);
}

function changeDia() {
    var img = document.getElementById("dia");
    var currentDia = img.getAttribute("src");

    if(currentDia == "style/slideshow/6.jpg") {
        number = 1;
    } else {
        number = number + 1;
    }
    img.setAttribute("src", "style/slideshow/" + number + ".jpg");
}

这段代码运行良好，但过渡非常粗鲁。我想让当前图像淡出，下一个图像淡入，以便平滑过渡。最简单的方法是什么？ Javascript 和 jQuery 都适合我。

提前致谢，

塞德里克

【问题讨论】：

首先，您必须在图像周围添加一个包装器。然后在当前的后面添加新的，减少当前的opacity，同时增加新的opacity。动画结束后，去掉旧的<img>。
你也可以使用Fancybox

标签： javascript jquery slideshow opacity

【解决方案1】：

你可以使用没有插件的jQuery轻松做到这一点：

var i = 0,               //initial index
    duration = 1000,     //animation duration
    interval = 3000;     //interval

function switchImg() {
    $("<img>")                                               //create new <img>
        .attr("src", "style/slideshow/" + (i<6?++i:(i=1,i)) + ".jpg") //set attr.
        .css("opacity", 0)                                   //hide it
        .prependTo("#wrap")                                  //add it to DOM
        .animate({                                           //fade in
            opacity: 1
        }, {
            duration: duration
        })
        .next()                                              //select current img
        .animate({                                           //fade out
            opacity: 0
        }, {
            duration: duration
        })
        .promise()
        .done(function () {                                  //remove old img
            $(this).remove();                                // when done
            setTimeout(switchImg, interval);                 //repeat
        });
}
switchImg();                                                 //start up

http://jsfiddle.net/DerekL/vzhHZ/

不要忘记将图像的position 属性设置为absolute，否则它将不起作用。

【讨论】：

哇，非常感谢德里克！该代码运行良好！唯一的问题是动画的持续时间总是相同的。即使我广告 2000 或任何其他数字......

【解决方案2】：

这是没有 Jquery 的流畅幻灯片，仅使用 css3 和纯 javascript：

<!DOCTYPE html>
<html>
<head>
<style>
#slider-outter { overflow: hidden;}
#slider-container { width: 100%; height: 200px; position: relative; left: 0; transition: all ease .3s;}
.slide-item {height: 200px; padding: 15px;display:block; position: absolute; top: 0;}
.slide-item:nth-child(even) {background: yellow;}
.slide-item:nth-child(odd) {background: pink;}
</style>
</head>
<body>
<h1>Smooth slideshow</h1>
<div id='slider-outter'>
<div id='slider-container'>
<div class="slide-item"><h2>Section 1</h2><p>Content A</p></div>
<div class="slide-item"><h2>Section 2</h2><p>Content B</p></div>
<div class="slide-item"><h2>Section 3</h2><p>Content C</p></div>
</div><!-- #slider-container -->
</div><!-- #slider-outter -->
<script>
  var sliderContainer = document.getElementById("slider-container");
  var sliderContainerWidth = sliderContainer.offsetWidth;
  var sliderItems = sliderContainer
     .getElementsByTagName("div"); // .getElementsByClassName('slide-item')

  // Set slider item width
  for (let y = 0; y < sliderItems.length; y++) {
    sliderItems[y].style.width = sliderContainerWidth + "px";
    sliderItems[y].style.left = (y * sliderContainerWidth) + "px";
  }

  // Slider switch action
  var activeSlide = 1;
  function nextSlide(n) {
    activeSlide++;
    if (activeSlide > sliderItems.length) { activeSlide = 1; }
    let newLeftPixel = ((activeSlide - 1) * sliderContainerWidth);
    sliderContainer.style.left = "-"+ newLeftPixel + "px";
  }

  // Auto-run every specified seconds
  setInterval(() => nextSlide(activeSlide), 5000);
</script>
</body>
</html>

【讨论】：