Question

这是我的剧本：

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

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

<div><img id="changer1" alt="before" src="img/zeitvergleich/Belgien/1/before.jpg" width="540" height="360" /> <img id="changer2" alt="after" src="img/zeitvergleich/Belgien/1/after.jpg" width="540" height="360" />
<div style="float:right" id="content"><span>1</span>/55</div>

<img src="img/prev.png" id="n_prev"/>&nbsp;&nbsp;<img src="img/trnn.png"/>&nbsp;&nbsp;<img src="img/next.png" id="n_next"/>

所以基本上文件夹只需点击即可更改。当下一个按钮+1和prev按钮-1。它完美无缺。只有一个小问题。我的柜台可以使用 - 数量超过55 ...有人可以帮我制作一些＆＃34;塞子＆＃34;所以分钟是1和最大是55？

Answer 1

使用简单的

if(i<55){

和

if(i>1){

喜欢：

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

  $("#n_prev").click(function(){
   if(i>1){
    i--;
    $("#content span").html(i)/55;
    var srcbefore='img/zeitvergleich/Belgien/'+i+'/before.jpg';
    var srcAfter="img/zeitvergleich/Belgien/"+i+"/after.jpg";
    $("#changer1").attr("src",srcbefore);
    $("#changer2").attr("src",srcAfter);
    console.log(srcbefore+"::"+srcAfter);
   }
 });
});

Answer 2

你试过这个：

$(document).ready(function () {
    var MAX = 55;
    $("#content span").html(i) / MAX;
    var i = 1;
    $("#n_next").click(function () {
        if (i > MAX)
            return;
        i++;
        $("#content span").html(i) / MAX;
        var srcbefore = 'img/zeitvergleich/Belgien/' + i + '/before.jpg';
        var srcAfter = "img/zeitvergleich/Belgien/" + i + "/after.jpg";
        $("#changer1").attr("src", srcbefore);
        $("#changer2").attr("src", srcAfter);
        console.log(srcbefore + "::" + srcAfter);
    });

    $("#n_prev").click(function () {
        if (i < 1)
            return;
        i--;
        $("#content span").html(i) / MAX;
        var srcbefore = 'img/zeitvergleich/Belgien/' + i + '/before.jpg';
        var srcAfter = "img/zeitvergleich/Belgien/" + i + "/after.jpg";
        $("#changer1").attr("src", srcbefore);
        $("#changer2").attr("src", srcAfter);
        console.log(srcbefore + "::" + srcAfter);
    });
});

Answer 3

制作if语句，检查i＆lt; 1或＆gt;超过55，并将其重置为55或1。



$(document).ready(function(){
$("#content span").html(i)/55;
    var i = 1;
    $("#n_next").click(function(){
        if(i == 55){ i =0 }
        i++;
        $("#content span").html(i)/55;
        var srcbefore='img/zeitvergleich/Belgien/'+i+'/before.jpg';
        var srcAfter="img/zeitvergleich/Belgien/"+i+"/after.jpg";
        $("#changer1").attr("src",srcbefore);
        $("#changer2").attr("src",srcAfter);
        console.log(srcbefore+"::"+srcAfter);
    });

     $("#n_prev").click(function(){
        if(i == 1){ i = 56 }
        i--;
        $("#content span").html(i)/55;
        var srcbefore='img/zeitvergleich/Belgien/'+i+'/before.jpg';
        var srcAfter="img/zeitvergleich/Belgien/"+i+"/after.jpg";
        $("#changer1").attr("src",srcbefore);
        $("#changer2").attr("src",srcAfter);
        console.log(srcbefore+"::"+srcAfter);
    });
});

<div><img id="changer1" alt="before" src="img/zeitvergleich/Belgien/1/before.jpg" width="540" height="360" /> <img id="changer2" alt="after" src="img/zeitvergleich/Belgien/1/after.jpg" width="540" height="360" />
<div style="float:right" id="content"><span>1</span>/55</div>

<img src="img/prev.png" id="n_prev"/>&nbsp;&nbsp;<img src="img/trnn.png"/>&nbsp;&nbsp;<img src="img/next.png" id="n_next"/>

$(document).ready(function(){ $("#content span").html(i)/55; var i = 1; $("#n_next").click(function(){ if(i == 55){ i =0 } i++; $("#content span").html(i)/55; var srcbefore='img/zeitvergleich/Belgien/'+i+'/before.jpg'; var srcAfter="img/zeitvergleich/Belgien/"+i+"/after.jpg"; $("#changer1").attr("src",srcbefore); $("#changer2").attr("src",srcAfter); console.log(srcbefore+"::"+srcAfter); }); $("#n_prev").click(function(){ if(i == 1){ i = 56 } i--; $("#content span").html(i)/55; var srcbefore='img/zeitvergleich/Belgien/'+i+'/before.jpg'; var srcAfter="img/zeitvergleich/Belgien/"+i+"/after.jpg"; $("#changer1").attr("src",srcbefore); $("#changer2").attr("src",srcAfter); console.log(srcbefore+"::"+srcAfter); }); }); <div><img id="changer1" alt="before" src="img/zeitvergleich/Belgien/1/before.jpg" width="540" height="360" /> <img id="changer2" alt="after" src="img/zeitvergleich/Belgien/1/after.jpg" width="540" height="360" /> <div style="float:right" id="content"><span>1</span>/55</div> <img src="img/prev.png" id="n_prev"/>  <img src="img/trnn.png"/>  <img src="img/next.png" id="n_next"/>

下一个/上一个按钮“塞子”。设置最小值和最大值值

3 个答案: