嘿伙计这是我的剧本
<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张照片。
希望你知道我做错了什么,你可以帮助我:) 抱歉我的坏事。
答案 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>