javascript - 如何通过单击按钮实现背景图像位置更改的幻灯片效果

Question

你好呀，

我正在制作一个 div，我必须在其中显示一些带有图像和文本的信息。我必须在单击按钮时滑动背景图像位置，使其看起来像滑动，并且“p 标签”上的文本也会随之变化并且最后，只显示完成按钮。

检查这个链接

.slide_img{ background: url('img/modal_window/1.jpg') no-repeat center center;width: 99.8%;height: 160px;border: 1px solid #cccccc;}
 <div class="info_div">
    <div class="slide_img"></div>
    <p>Change the text with slider image changes</p>
    <div class="clearfix"></div>
</div>
<footer>
    <input type="button" value="Finish" />
    <input type="button" value="Next"  />
    <input type="button" value="Previous" />
</footer>

Answer 1

编辑：响应...

实际上我希望它由 javascript 完成

有许多jQuery (javascript) 图像滑块可以为您执行此操作，它们非常容易设置并且有很好的文档。例如，我喜欢使用Nivo Slider。如果你想花时间，用 jQuery 自己构建一个不需要太多的 javascript 背景来理解正在发生的事情。

Answer 2

这是您的演示

这是使其工作的 Jquery 代码片段。请注意，我已使用随机图像进行演示。你可以使用你的:)

$(document).ready(function () {

    var images = [{
        "image": "http://cdn.arstechnica.net/wp-content/uploads/2012/10/02_Place_Piorkowski.jpg","Text": "text 1 for slide"
    }, {
        "image": "http://cdn.arstechnica.net/wp-content/uploads/2012/10/03_Place_Burnette.jpg", "Text": "text 2 for slide"
    }, {
        "image": "http://cdn.arstechnica.net/wp-content/uploads/2012/10/04_Place_21756_1_Williamson.jpg","Text": "text 3 for slide"
    }, {
        "image": "http://cdn.arstechnica.net/wp-content/uploads/2012/10/09_Place_22047_3_Drange.jpg", "Text": "text 4 for slide"
    }];

    $(".slide_img").data("imageShown", 0);
    $(".slide_img").css("background-image", "url(" + images[0].image + ")");
    $("p.df").html(images[0].Text);
    $("input[value='Finish']").click(function () {
        $(".slide_img").hide();
        $("p.df").hide();
    });
    $("input[value='Next']").click(function () {
        var id = $(".slide_img").data("imageShown");
        if (id == (images.length - 1)) {
            return;
        }
        id = id + 1;
        $(".slide_img").data("imageShown", id);
        $(".slide_img").css("background-image", "url(" + images[id].image + ")");
        $("p.df").html(images[id].Text);

    });
    $("input[value='Previous']").click(function () {
        var id = $(".slide_img").data("imageShown");
        if (id == 0) {
            return;
        }
        id = id - 1;
        $(".slide_img").data("imageShown", id);
        $(".slide_img").css("background-image", "url(" + images[id].image + ")");
        $("p.df").html(images[id].Text);
    });

});