[英]Javascript Next/Prev Script
Hey guys this is my script 大家好,这是我的剧本
<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"/>
This is not my script. 这不是我的脚本。 Someone helped me to make it work at least for the "next" button.
有人帮助我使它至少在“下一个”按钮上起作用。 But the problem is I cant figure out how I get it worked with "prev" button too.
但是问题是我无法弄清楚如何使用“上一个”按钮来实现它。
Now when I press next it works fine. 现在,当我按下一步时,它可以正常工作。 But when I press prev he first make i++ (So goes to the next 2 pictures) and then he goes 1 picture back.
但是,当我按下prev时,他首先制作i ++(因此转到下两张图片),然后又返回一张图片。
Hope you know what I did wrong and you can help me :) And sorry for my bad englisch. 希望您知道我做错了什么,可以为您提供帮助:)抱歉,我的英语不好。
Your problem is the i
index tracking. 您的问题是
i
索引跟踪。 Try incrementing/decrementing in the beginning! 尝试在开始时增加/减少! QUick and dirty fix:
快速而肮脏的修复:
<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>
Update: for a little cleaner structure try something like this: 更新:为使结构更清洁,请尝试以下操作:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.