Javascript Next / Prev Script

时间:2014-09-29 11:36:14

标签: javascript jquery

嘿伙计这是我的剧本

<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张照片。

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

1 个答案:

答案 0 :(得分: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>