Як дамагчыся эфекту слізгацення з змяненнем становішча фонавага малюнка па-націску кнопкі

Прывітанне там,

Я раблю DIV, у якім я павінен паказаць некаторую частку інфармацыі з выявай і text.I павінна слізгаць становішча фонавага малюнка па націску кнопкі, так што ён выглядае як слізгаценне і тэкст на «р тэгу» таксама змяняецца разам з ім і у рэшце рэшт, толькі скончыць кнопка адлюстроўваецца.

праверыць гэтую спасылку

.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>
    
Change the text with slider image changes

<div class="clearfix"></div> </div>
<input type="button" value="Finish" /> <input type="button" value="Next" /> <input type="button" value="Previous" />
 
0
Ці можаце вы паказаць jsfiddle на тое, што ў вас ужо ёсць?
дададзена аўтар rahul maindargi, крыніца
Па-першае, гэта было б выдатна, калі б вы маглі стварыць скрыпку, каб прадэманстраваць сваю сітуацыю ... jsfiddle.net . Па-другое, вы на самой справе спрабавалі пакласці разам некаторы JavaScript для гэтай мэты? Задача, як гэта досыць лёгка, выкарыстоўваючы бібліятэку як JQuery.
дададзена аўтар Doug, крыніца
@Doug чакаць я паклаў яго на jsfiddle. на самай справе я хацеў, каб гэта зрабіць з дапамогай JavaScript.
дададзена аўтар user2021917, крыніца
@Doug чакаць я паклаў яго на jsfiddle. на самай справе я хацеў, каб гэта зрабіць з дапамогай JavaScript.
дададзена аўтар user2021917, крыніца

6 адказы

Here is your 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);
    });

});
0
дададзена
Рахул, вы зрабілі гэта вельмі прыгожа. я зрабіў некалькі змен у ім. Дзякуй за вашу дапамогу
дададзена аўтар user2021917, крыніца

Here is your 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);
    });

});
0
дададзена
Рахул, вы зрабілі гэта вельмі прыгожа. я зрабіў некалькі змен у ім. Дзякуй за вашу дапамогу
дададзена аўтар user2021917, крыніца

Here is your 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);
    });

});
0
дададзена
Рахул, вы зрабілі гэта вельмі прыгожа. я зрабіў некалькі змен у ім. Дзякуй за вашу дапамогу
дададзена аўтар user2021917, крыніца

EDIT: У адказ на ...

<�Р> на самай справе я хацеў, каб гэта зрабіць з дапамогай JavaScript

Ёсць шмат jQuery (JavaScript) паўзункоў малюнка там, што будзе рабіць гэта для вас, што даволі лёгка наладзіць і мець вялікая дакументацыя. Напрыклад, я люблю выкарыстоўваць Nivo Slider . Калі вы хочаце, каб заняць час, будаўніцтва аднаго сябе ў jQuery не патрабуе вялікага яваскрипта фону, каб зразумець, што адбываецца.

0
дададзена

EDIT: У адказ на ...

<�Р> на самай справе я хацеў, каб гэта зрабіць з дапамогай JavaScript

Ёсць шмат jQuery (JavaScript) паўзункоў малюнка там, што будзе рабіць гэта для вас, што даволі лёгка наладзіць і мець вялікая дакументацыя. Напрыклад, я люблю выкарыстоўваць Nivo Slider . Калі вы хочаце, каб заняць час, будаўніцтва аднаго сябе ў jQuery не патрабуе вялікага яваскрипта фону, каб зразумець, што адбываецца.

0
дададзена

EDIT: У адказ на ...

<�Р> на самай справе я хацеў, каб гэта зрабіць з дапамогай JavaScript

Ёсць шмат jQuery (JavaScript) паўзункоў малюнка там, што будзе рабіць гэта для вас, што даволі лёгка наладзіць і мець вялікая дакументацыя. Напрыклад, я люблю выкарыстоўваць Nivo Slider . Калі вы хочаце, каб заняць час, будаўніцтва аднаго сябе ў jQuery не патрабуе вялікага яваскрипта фону, каб зразумець, што адбываецца.

0
дададзена