Javascript Next / Prev Script

Question

嘿伙计这是我的剧本

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script>
$(document).ready(function(){
    var i = 2;
    $("#n_next").click(function(){
        var srcbefore='img/zeitvergleich/'+i+'/before.jpg';
        var srcAfter="img/zeitvergleich/"+i+"/after.jpg";
        $("#changer1").attr("src",srcbefore);
        $("#changer2").attr("src",srcAfter);
        console.log(srcbefore+"::"+srcAfter);
        i++;
    });

     $("#n_prev").click(function(){
        var srcbefore='img/zeitvergleich/'+i+'/before.jpg';
        var srcAfter="img/zeitvergleich/"+i+"/after.jpg";
        $("#changer1").attr("src",srcbefore);
        $("#changer2").attr("src",srcAfter);
        console.log(srcbefore+"::"+srcAfter);
        i--;
    });
});
</script>

<div><img id="changer1" alt="before" src="img/zeitvergleich/1/before.jpg" width="540" height="360" /> <img id="changer2" alt="after" src="img/zeitvergleich/1/after.jpg" width="540" height="360" /></div>
<img src="img/prev.png" id="n_prev"/> <img src="img/next.png" id="n_next"/>

这不是我的剧本。有人帮助我让它至少在＃34; next＆＃34;按钮。但问题是我无法弄清楚我是如何使用＆＃34; prev＆＃34;按钮也是。

现在当我按下它时，它工作正常。但是当我按下prev时，他首先制作i ++（所以转到接下来的2张照片），然后他再拍1张照片。

希望你知道我做错了什么，你可以帮助我:) 抱歉我的坏事。

Answer 1

您的问题是i索引跟踪。尝试在开始时递增/递减！ 快速和肮脏的修复：

<script>
$(document).ready(function(){
    var i = 1;
    $("#n_next").click(function(){
        i++;
        var srcbefore='img/zeitvergleich/'+i+'/before.jpg';
        var srcAfter="img/zeitvergleich/"+i+"/after.jpg";
        $("#changer1").attr("src",srcbefore);
        $("#changer2").attr("src",srcAfter);
        console.log(srcbefore+"::"+srcAfter);
    });

     $("#n_prev").click(function(){
        i--;
        var srcbefore='img/zeitvergleich/'+i+'/before.jpg';
        var srcAfter="img/zeitvergleich/"+i+"/after.jpg";
        $("#changer1").attr("src",srcbefore);
        $("#changer2").attr("src",srcAfter);
        console.log(srcbefore+"::"+srcAfter);
    });
});
</script>

更新：对于一个更清洁的结构尝试这样的事情：

<script>
$(document).ready(function(){
    var i = 1;
    var showImageSet = function (index) {
        var srcbefore='img/zeitvergleich/'+index+'/before.jpg';
        var srcAfter="img/zeitvergleich/"+index+"/after.jpg";
        $("#changer1").attr("src",srcbefore);
        $("#changer2").attr("src",srcAfter);
        console.log(srcbefore+"::"+srcAfter);
    };

    $("#n_next").click(function(){
        i++;
        showImageSet(i);
    });

     $("#n_prev").click(function(){
        i--;
        showImageSet(i);
    });
});
</script>