Question

你好，

我正在创建一个div，我必须用图像和文本显示一些信息。我必须在点击按钮时滑动背景图像位置，这样看起来像滑动，“p tag”上的文字也会发生变化用它最后，只显示完成按钮。

.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

这是 DEMO

这是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);
    });

});

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

2 个答案: