Jquery：对角滑动图像

Question

这里是我想要达到的效果：

这是一个图像，其他图像应该按照箭头的方向对角滑动。效果不应该是淡入淡出效果。必须实现幻灯片效果。

这里是html：

<div id="slider_page">
   <div style="display: block;">
       <img src="img1.jpg">                      
       <img src="img2.jpg">                 
   </div>
</div>

请大家帮忙

对于html代码中的混乱感到抱歉。

提前致谢

Answer 1

这是一个关于如何在没有库的情况下自行完成的粗略草图。该代码可能需要针对您的特定情况进行一些调整。例如，如果您不仅要滑动图像，还要滑动包含文本的元素，请从使用 <img> 更改为 <div>。您会在 cmets 中找到解释。

HTML

<div id="carousel">
    <img class="carousel-img" src="img1.jpg" />
    <img class="carousel-img" src="img2.jpg" />
    <img class="carousel-img" src="img3.jpg" />
</div>

CSS

#carousel {
    position: relative; /* So images are positioned relative to it. */
    width: 400px;
    height: 300px;
    overflow: hidden; /* So we clip the other images. */
}

.carousel-img {
    width: 100%;
    position: absolute; /* Position relative to parent div. */
    left: 400px; /* Hide just beyond bottom right corner. */
    top: 300px;
}

.carousel-img:first-child {
    /* Do not hide the first image. */
    left: 0px;
    top: 0px;
}

JavaScript

//Some settings.
var animation_time = 500; //Millisecs the animation takes.
var waiting_time = 2000; //Millisecs between animations.

//Some variables.
var images; //A list of the images.
var i = 0; //Index of the current image.
var w; //Width of carousel.
var h; //Height of carousel.

$(function() {

    //Runs when the DOM is ready.

    //Set the variables.
    images = $("#carousel .carousel-img");
    w = $("#carousel").css("width");
    h = $("#carousel").css("height");

    //Start the carousel.
    setTimeout(slideToNext, waiting_time)    

});

function slideToNext() {

    //Get the index of the next image.
    var next = (i + 1) % images.length;

    //Make sure the new image is on top.
    images.css("z-index", 0);
    images.eq(next).css("z-index", 1);

    //Animate the next image.
    images.eq(next).animate({left: "0px", top: "0px"}, animation_time, function() {

        //Runs when the animation is compleated.

        //Move the old image out.
        images.eq(i).css({left: w, top: h});

        //Now this is the current image.
        i = next;

        //Do it again.
        setTimeout(slideToNext, waiting_time);

    });

}

这是一个正在工作的JSFiddle，包括Caspar David Friedrich 的一些精美艺术品。

也可以配置现有的轮播库（如Slick 或Jssor）来执行此操作。