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>。你会在评论中找到解释。

<强> 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）来执行此操作。

Jquery：对角滑动图像

1 个答案: